这里先放上官方的文档：Vue Router
由于官方文档的说明也比较详细，我这里只说明其中常用的几种：
一.嵌套路由：
顾名思义，嵌套路由，就是说明路由中间有嵌套的关系，就比如说我们常用的后台管理系统，有左侧菜单和右侧内容（如下图）：
image
其中左侧Aside和顶部Header，底部Footer，这些都是公用的部分，只有中间的Main是随着左侧的菜单进行变化的。
我们不可能每个页面都把这些公用的部分写一遍吧，肯定是写一个公共的组件，然后进行公用，中间的Main部分，作为组件进行变化，那么这里就用到我们的嵌套路由了。
1.嵌套路由的写法如下：
组件写法：
const User = {
template: `
<div class="user">
<h2>User {{ $route.params.id }}</h2>
<router-view></router-view>
</div>
`
}
路由写法
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User,
children: [
{
// 当 /user/:id/profile 匹配成功，
// UserProfile 组件 会被渲染在 User 的 <router-view> 中
path: 'profile',
component: UserProfile
},
{
// 当 /user/:id/posts 匹配成功
// UserPosts 组件 会被渲染在 User 的 <router-view> 中
path: 'posts',
component: UserPosts
}
]
}
]
})
以上是官方给出的用法，还有一种用法就是我上面图片所说明的用法，如下：
组件代码部分Layout.vue
<template>
<el-container style="height: 100%">
<el-aside width="auto">
<v-sidebar></v-sidebar><!--v-sidebar是左侧菜单 -->
</el-aside>
<el-container class="main-container">
<el-header>
<v-header></v-header><!--v-header是顶部 -->
</el-header>
<el-main style="height:100%">
<router-view class="view" /> <!--这里的router-view 就是我们页面的主体内容Main，也就是我们要讲的嵌套路由中要嵌套的位置 -->
</el-main>
<el-footer>
<v-footer></v-footer><!--v-footer是底部 -->
</el-footer>
</el-container>
</el-container>
</template>
{
path: '/home',
component: Layout, //其中Layout 就是我上面图片里面所说的左侧，顶部，底部这些公用的组件，把这些公用的组件放到一个组件里面，然后在其中在增加一个<router-view>
children: [{
path: '',
name: '首页',
component: () => import(/* webpackChunkName: "welcome" */ '@/views/home/home.vue'),
}]
}
这里与官方给出的说明不一样的地方，就是在外层的路由中多出了一个component:Layout，这个component就是说明我的外层路由不是空的，也是有内容的，你嵌套路由的内容，只占我其中的一部分，而不是全部，如果外层路由没有component的话，那就是子路由占的是全部内容。这种情况才是我们常用的情况，在这里我们可以看到子路由的path是没有值的，那说明我们所需要的路由地址，就是父路由的地址，也就是/home这个路由地址，我们可以直接看到我们想看到的Main，/home后面无需再跟其他内容。
还有一种情况是子路由的path也是有值的：
{
path: '/home',
component: Layout, //其中Layout 就是我上面图片里面所说的左侧，顶部，底部这些公用的组件，把这些公用的组件放到一个组件里面，然后在其中在增加一个<router-view>
children: [{
path: 'index', //注意这里的index前面没有斜杠 /
name: '首页',
component: () => import(/* webpackChunkName: "welcome" */ '@/views/home/home.vue'),
}]
}
这个与上面的相比就只有子路由的path多了一个index值，这种情况，我们想访问首页的话，我们的路由地址就是：/home/index 了，而不是直接访问/home 了，注意这里，子路由的path前面没有/斜杠，这个官方也有说明。
下面还有另一种情况，就是子路由的path前面，带斜杠的/:
{
path: '/home',
component: Layout, //其中Layout 就是我上面图片里面所说的左侧，顶部，底部这些公用的组件，把这些公用的组件放到一个组件里面，然后在其中在增加一个<router-view>
children: [{
path: '/index', //注意这里的index前面是有斜杠 / 的
name: '首页',
component: () => import(/* webpackChunkName: "welcome" */ '@/views/home/home.vue'),
}]
}
这里的path前面是有斜杠 / 的，这种情况我们访问首页的时候，直接访问的就是 /index 就是我们的首页了，无需再加上父路由的path了，因为官方有说明：要注意，以 / 开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径。
所以当我们在做一些后台管理系统的时候，左侧顶部等的一些公共组件，就写成Layout公共组件，然后我们把页面的具体内容，通过路由嵌套，放到页面中，其中<router-view>就是我们的路由嵌套的展示区域了。
一般情况，我们都是根据内容模块，多写几个嵌套的路由，例如：
{
path: '/marketing',
component: Layout,
children: [{
path: 'activety1',
name: '活动1',
component: () => import(/* webpackChunkName: "activety1" */ '@/views/marketing/activety/activety1.vue')
},{
path: 'activety2',
name: '活动2',
component: () => import(/* webpackChunkName: "activety2" */ '@/views/marketing/activety/activety2.vue')
},{
path: 'activety3',
name: '活动3',
component: () => import(/* webpackChunkName: "activety3" */ '@/views/marketing/activety/activety3.vue')
}]
}, {
path: '/setting',
component: Layout,
children: [{
path: 'setting1',
name: '设置1',
component: () => import(/* webpackChunkName: "setting1" */ '@/views/setting/setting1.vue')
},{
path: 'setting2',
name: '设置2',
component: () => import(/* webpackChunkName: "setting2" */ '@/views/setting/setting2.vue')
},{
path: 'setting3',
name: '设置2',
component: () => import(/* webpackChunkName: "setting3" */ '@/views/setting/setting3.vue')
}]
}
其中marketing是一个模块，那么我写一个marketing的父路由，只要是marketing相关的内容，都放在marketing下面，成为marketing的子路由，
setting的放在setting的下面，成为setting的子路由。
这样写起来比较清晰明了，一看就知道是哪个模块的。
但是有时候我们为了方便，会用以下写法：
{
path: '/',
component: Layout,
children: [{
path: '/setting/setting1',
name: '设置1',
component: () => import(/* webpackChunkName: "setting1" */ '@/views/setting/setting1.vue')
},{
path: '/setting/setting2',
name: '设置2',
component: () => import(/* webpackChunkName: "setting2" */ '@/views/setting/setting2.vue')
},{
path: '/setting/setting3',
name: '设置2',
component: () => import(/* webpackChunkName: "setting3" */ '@/views/setting/setting3.vue')
},{
path: '/marketing/activety1',
name: '活动1',
component: () => import(/* webpackChunkName: "activety1" */ '@/views/marketing/activety/activety1.vue')
},{
path: '/marketing/activety2',
name: '活动2',
component: () => import(/* webpackChunkName: "activety2" */ '@/views/marketing/activety/activety2.vue')
},{
path: '/marketing/activety3',
name: '活动3',
component: () => import(/* webpackChunkName: "activety3" */ '@/views/marketing/activety/activety3.vue')
}]
}
其实上面这些写法也是可以的，因为我的子路由的path最前面都是有/斜杠 开头的，所以父路由的path已经不起作用了，我的子路由以/斜杠 开头，就已经是从根目录开始了，所以父路由的path就没用了。只是没有分的那么清晰，维护起来可能相对比较费劲点，还有就是如果是这种合并到一起的写法的话，那么我们的子路由的path开头就一定要以/斜杠开头，不然就会被匹配到父路由的path了。
以上就是我要说的嵌套路由了。
由于篇幅问题，下面要说的动态路由，在下一篇文章回继续说明，敬请期待！
网友评论