【Vue篇】详解router路由 | element-ui组件 | 嵌套路由
专栏【Vue】
喜欢的诗句：更喜岷山千里雪 三军过后尽开颜。
音乐分享【如愿】
欢迎并且感谢大家指出小吉的问题
文章目录
- Vue-Router介绍
- 路由组成
- 代码解释
-
- ⭐标签式路由
- ⭐编程式路由跳转
- 自定义跳转到404界面
- 嵌套路由
- element-ui组件
-
- ⭐代码解释
-
- 优化
Vue-Router介绍
Vue Router是Vue.js官方提供的用于构建单页应用（SPA）的路由管理器。它能够集中处理应用程序中的路由跳转、参数传递、页面切换等功能，使得开发者可以轻松地实现前端路由功能。
Vue Router具有以下特点：
声明式路由配置：Vue Router使用声明式的方式配置路由，通过简单的配置项，可以定义页面路径、对应的组件以及其他相关信息。这种配置方式直观且易于维护。
嵌套路由：Vue Router支持嵌套路由，即一个路由下面可以包含多个子路由，从而实现更复杂的页面结构和组织方式。
动态路由匹配：Vue Router支持将动态参数添加到路由路径中，用于匹配不同的路由，从而实现根据不同参数渲染不同组件的功能。
导航守卫：Vue Router提供了多种导航守卫，例如beforeEach、beforeResolve和afterEach等，在路由跳转前、跳转过程中和跳转后执行相应的逻辑，可以用于进行权限验证、数据加载等操作。
编程式路由跳转：除了可以通过声明式配置来实现路由跳转，Vue Router还支持编程式的方式进行路由跳转，通过调用路由实例上的方法来实现跳转，可以更灵活地在代码中控制导航逻辑。
总而言之，Vue Router是一个功能强大且易于使用的路由管理器，能够帮助开发者构建复杂的前端单页应用，管理页面之间的路由关系，实现良好的用户体验。
所谓的路由，就是根据不同的访问路径，对应不同的页面展示
使用路由需要安装
npm install vue-router
路由组成
所谓路由请求，就是我们点击超链接后，会发出一个请求，这个请求会使页面发生变化，并且页面的路径也会对应发送变化
代码解释
我们创建好vue脚手架工程后(这一次我们要使用路由，使用要选择手动创建，并且勾选router这个选项)
具体创建过程就不演示了，需要的同学可以去了解一下 使用可视化工具创建vue脚手架 的方法
⭐标签式路由
标签式路由就是点击超链接，然后跳转到相应的界面
看main.js文件
我们看下一段代码
效果
⭐编程式路由跳转
编程式路由跳转是通过编写代码来实现在Vue.js应用程序中进行路由跳转的方式，而不是通过用户的交互行为（例如点击链接或按钮）来触发路由跳转。
效果
我们点击按钮，也会发生跳转
自定义跳转到404界面
我们自己编写一个事件，点击按钮后，会自动跳转到一个界面中
新创建一个view
我们仿照上面编程式路由跳转的代码，我们创建Test超链接
编写router里面的代码
由于我们仅仅创建的Test超链接，没有创建这个实现这个超链接的路由地址，所以我们点击Test超链接，就会跳转到404界面
嵌套路由
嵌套路由是指在Vue.js应用程序中，一个路由下面还可以包含子路由的一种路由配置方式。通过嵌套路由，您可以更好地组织和管理复杂的页面结构，使得页面之间的关系更加清晰和灵活。
简而言之就是在一个界面内存在A和B两个区域，A区域切换内容，但是B区域不发生变化，或者B区域发生变化而A区域不变，或者二者都变化，这就是嵌套路由
下面我们讲解一下具体用法，我们需要使用element-ui进行辅助
element-ui组件
element-ui官网：https://element.eleme.cn/#/zh-CN/component/installation
我们首先安装官网的方法安装element-ui
安装完成后，我们在main.js中加入下面的代码
这样我们就可以全局使用element-ui了
下面我们看图片，在官网中找到相应的位置
复制得到下面的代码
<el-container>
<el-header>Headerel-header>
<el-container>
<el-aside width="200px">Asideel-aside>
<el-main>Mainel-main>
el-container>
el-container>
我们回到代码，在view文件夹下面再创建一个文件夹container，里面创建文件ContainerView.vue
把刚才复制的代码粘贴进去，在官网中找到< style >标签里面的代码，复制粘贴进去
<template>
<el-container>
<el-header>Headerel-header>
<el-container>
<el-aside width="200px">Asideel-aside>
<el-main>Mainel-main>
el-container>
el-container>
template>
<script>
export default{
}
script>
<style>
.el-header, .el-footer {
background-color: #B3C0D1;
color: #333;
text-align: center;
line-height: 60px;
}
.el-aside {
background-color: #D3DCE6;
color: #333;
text-align: center;
line-height: 200px;
}
.el-main {
background-color: #E9EEF3;
color: #333;
text-align: center;
line-height: 160px;
}
body > .el-container {
margin-bottom: 40px;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
line-height: 260px;
}
.el-container:nth-child(7) .el-aside {
line-height: 320px;
}
style>
然后我们回到index,js，编写嵌套路由
⭐代码解释
下面我们创建多个视图
其中修改其中的内容如下图
其他的同理
我们回到index.js中，来编写嵌套路由代码
下面我们在布局容器视图中添加< router-view >，实现子视图组件展示
在布局容器视图中添加< router-link >，实现路由请求
优化
我们发现，如果我们不点击超链接，而是直接访问/c，界面中的子视图区域什么都没有
那么我们应该怎么修改代码，来解决这个问题呢
我们可以用redirect来解决
这样我们一打开界面就会直达p1界面
在技术的道路上，我们不断探索、不断前行，不断面对挑战、不断突破自我。科技的发展改变着世界，而我们作为技术人员，也在这个过程中书写着自己的篇章。让我们携手并进，共同努力，开创美好的未来！愿我们在科技的征途上不断奋进，创造出更加美好、更加智能的明天！
