【Vue学习总结】Vue路由中的嵌套
上一篇我们讲解了路由的编程式导航、Hash模式以及History模式，了解了Vue中路由的几种切换方式，本篇我们来路由中的嵌套。
本系列博文使用的Vue版本：2.6.11
一、什么是路由嵌套
路由的嵌套，也可以称为“父子路由”，即在一个路由中又包含了另一个路由。
例如下面的ElementUI的中文网站页面，上面的“指南”和“组件”的导航栏，点击后会直接刷新整个页面，进行新的路由页面的跳转。而单独点击“组件”下左侧的栏目链接，仅刷新右侧的内容区域，不会刷新整个页面，此时左侧链接“自定义主题”和上面导航链接“组件”就是一个路由嵌套，也可以叫“父子路由”：
实现路由嵌套的方法很简答，只需要在定义路由的时候，为该路由定义一个“children”参数，该参数为此路由的嵌套路由，也是“子路由”，是一个数组，内容结构和上面的主路由一样，只是path前不需要添加”/“了：
import User from '@/components/Demo'
import User from '@/components/Demo/DemoAdd'
import User from '@/components/Demo/DemoDel'
import User from '@/components/Demo/DemoUpdate'
import User from '@/components/Demo/DemoView'
const routes = [
{
path:'/demo',
component: Demo,
children:[
{path:'demo-add',component: DemoAdd},
{path:'demo-del',component: DemoDel},
{path:'demo-update',component: DemoUpdate},
{path:'demo-view',component: DemoView}
]
}
];这里的所有component都是普通的vue组件，在之前import引入即可。
这样在Demo主页面中，设置相应的链接，就可以在Demo主页面的router-view加载嵌套的路由页面，而不会刷新到其他的组件。
二、实现路由嵌套
我们在之前的工程中，在组件下新建一个User.vue，开发一个“用户中心”：
然后在router.js中添加并引入该组件：
//...其它部分代码省略...
import User from '@/components/User'
Vue.use(Router)
//2、定义路由
const routes = [
{path:'/helloWorld',component: HelloWorld},
{path:'/user',component: User}
//...其它部分代码省略...
]然后在HelloWorld.vue中添加该模块的导航：
<template>
<div id="app">
<div class="header-css">
<router-link to="/helloWorld">首页</router-link>
<router-link to="/news">新闻</router-link>
<router-link to="/user">用户</router-link>
</div>
<router-view/>
</div>
</template>效果：
我们来完善User.vue的代码，来实现一个左右分栏的效果：
<template>
<div id="user">
<div class="user-info">
<div class="left">
<ul>
<li>用户列表</li>
<li>新增用户</li>
</ul>
</div>
<div class="right">
内容区域
</div>
</div>
</div>
</template>
<script>
export default {
name: 'user',
data () {
return {
msg: '用户中心'
}
}
}
</script>
<style scoped>
.user-info{
display: flex;
}
.user-info li{
line-height: 20px;
}
.left{
width: 200px;
min-height: 400px;
border-right: 1px solid #eee;
}
.right{
flex: 1;
/**解释：
flex：1即为flex-grow：1，
经常用作自适应布局，将父容器的display：flex，
侧边栏大小固定后，将内容区flex：1，
内容区则会自动放大占满剩余空间。
*/
}
</style>效果：
上面只是个草图，还不能实现嵌套路由的效果，我们来一步步实现（上面用到了flex布局，想了解的童鞋看最下面的参考链接）。
首先为User页面创建其两个子组件：
这里为新增用户和用户列表的组件，这里不编写复杂业务，仅编写template显示一段文本即可：
<template>
<div id="userList">
用户列表
</div>
</template><template>
<div id="userAdd">
新增用户
</div>
</template>然后我们在router.js中引入新增用户页面的子组件，并将它们设置在User组件路由的子路由参数“children”中：
import HelloWorld from '@/components/HelloWorld'
import User from '@/components/User'
import UserAdd from '@/components/User/UserAdd'
import UserList from '@/components/User/UserList'
Vue.use(Router)
//2、定义路由
const routes = [
{ path: '/helloWorld', component: HelloWorld },
{
path: '/user',
component: User,
children: [
{ path: 'userAdd', component: UserAdd },
{ path: 'userList', component: UserList }
]
}
]然后我们重新修改User.vue，为左侧菜单增加链接，右侧增加router-view显示子路由内容：
<template>
<div id="user">
<div class="user-info">
<div class="left">
<ul>
<li>
<router-link to="/user/userList">用户列表</router-link>
</li>
<li>
<router-link to="/user/userAdd">新增用户</router-link>
</li>
</ul>
</div>
<div class="right">
<router-view></router-view>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'user',
data () {
return {
msg: '用户中心'
}
}
}
</script>
<style scoped>
.user-info{
display: flex;
}
.user-info li{
line-height: 20px;
}
.left{
width: 200px;
min-height: 400px;
border-right: 1px solid #eee;
}
.right{
flex: 1;
/**解释：
flex：1即为flex-grow：1，
经常用作自适应布局，将父容器的display：flex，
侧边栏大小固定后，将内容区flex：1，
内容区则会自动放大占满剩余空间。
*/
}
</style>效果：
这就实现了一个路由嵌套的效果。
三、总结
实现一个嵌套路由的效果，需要以下步骤：
1、设置路由，定义需要嵌套子路由的父路由的children参数：
import User from '@/components/Demo'
import User from '@/components/Demo/DemoAdd'
import User from '@/components/Demo/DemoDel'
const routes = [
{
path:'/demo',
component: Demo,
children:[
{path:'demo-add',component: DemoAdd},
{path:'demo-del',component: DemoDel}
]
}
];2、在父路由里配置子路由的链接以及其显示的地方（router-view）
<div class="left">
<ul>
<li>
<router-link to="/demo/demo-add">新增Demo</router-link>
</li>
<li>
<router-link to="/demo/demo-del">删除Demo</router-link>
</li>
</ul>
</div>
<div class="right">
<router-view></router-view>
</div>以上就是Vue嵌套路由的所有内容。下一篇我们来介绍Vue的UI框架Mint UI的使用。
参考：
《IT营：itying.com-2018年Vue2.x 5小时入门视频教程》
《Flex 布局语法教程》（https://www.runoob.com/w3cnote/flex-grammar.html）
转载请注明出处：https://blog.csdn.net/acmman/article/details/111091948
本文地址：https://blog.csdn.net/u013517797/article/details/111091948