vue多层嵌套路由实例分析
Vue多层嵌套路由是Vue路由的一个特別应用，它可以帮助我们实现更加优秀的页面路由分配，实现深度结构的网站，具有非常大的灵活性。嵌套路由使得我们能够在组件的内部定义自己的子路由，从而有效地管理和控制复杂的页面，在这里我们将深入解析Vue多层嵌套路由的实例。
嵌套路由的概念
嵌套路由是指路由之间存在子父级关系，即一个路由下面可以有多个子路由，就像一个树形结构一样，这种层级结构更加清晰明了，逐层展开、有机连接。这意味着将整个应用程序的路由分层组织，其中整个应用程序的主要路由由一个或多个父级路由组成，每个父级路由可以包括自己的子路由，这种路由组合能够最大可能的提高应用程序的可重用性和可扩展性。
嵌套路由的设计思路
关于嵌套路由的设计思路，我们需要考虑如下问题：
1. 如何实现多层路由嵌套？
答：只需要在父级路由内部增加一个嵌套的子路由即可，将它们传递给VueRouter的routes选项。例如：
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
children: [
{
path: 'bar',
component: Bar
}
]
}
]
})
通过上述代码中的children选项，我们就可以实现多层路由嵌套，将Bar组件添加到Foo组件中。
2. 如何在父组件中找到当前激活的子路由？
答：我们可以在父组件中通过$children属性访问子组件，使用$route.path来比较子路由的地址与当前选中的页面是否匹配。例如：
<template>
<div>
<router-link to="/foo/bar">Bar</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
data() {
return {
currentRoute: null
}
},
watch: {
'$route.path'(newVal) {
this.currentRoute = newVal
}
},
mounted() {
this.currentRoute = this.$route.path
}
}
</script>
在父组件中，我们使用watch监听$route.path的变化，一旦发生变化，我们就将当前选中的路径保存在currentRoute属性中。在模板中，我们将当前选中的路由显示在组件中。
3. 如何动态加载子路由？
答：动态加载子路由通过webpack的异步组件import方法或require.ensure方法即可实现。例如：
{
path: '/article',
component: ArticleList,
children: [
{
path: ':id',
component: () => import('@/components/ArticleDetail.vue')
}
]
},
这里我们在子路由的组件属性上使用了箭头函数，通过import引入子路由，不需要在页面加载时加载整个组件，而只是在需要时加载它。原理是在路由被激活时使用Vue的异步组件加载机制，使用import语句异步地加载其组件，从而使得应用程序加载速度更快。
嵌套路由的实例
下面，我们将通过一个实例来实现多层路由的嵌套。
需求：
实现一个嵌套路由，并且实现动态路由传参和组件懒加载。
步骤如下：
1. 安装vue-router
npm install vue-router -S
2. 安装3rd库
我们需要安装axios和qs库，用于数据交互。
npm install axios qs -S
3. 创建路由组件
在src/components目录下新建article和comment目录，并在该目录下创建对应的组件
|-src |--|components |----article |------list.vue |------detail.vue |----comment |------list.vue |------detail.vue
4. 在路由中配置嵌套路由
在src/router/index.js文件中配置路由
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const ArticleList = () => import('@/components/article/list.vue')
const ArticleDetail = () => import('@/components/article/detail.vue')
const CommentList = () => import('@/components/comment/list.vue')
const CommentDetail = () => import('@/components/comment/detail.vue')
const routes = [
{
path: '/',
component: ArticleList,
meta: { title: '文章' }
},
{
path: '/article',
component: ArticleList,
meta: { title: '文章' },
children: [
{
path: ':id',
component: ArticleDetail,
meta: { title: '文章详情' }
}
]
},
{
path: '/comment',
component: CommentList,
meta: { title: '评论' },
children: [
{
path: ':id',
component: CommentDetail,
meta: { title: '评论详情' }
}
]
}
]
const router = new Router({
mode: 'history',
routes
})
export default router
我们通过Vue的异步组件加载机制，使用import语句异步地加载其组件，从而使得应用程序加载速度更快。然后我们设置了三个路由，文章主路由、文章子路由、评论主路由和评论子路由。
5. 创建组件
在article和comment下面的list.vue和detail.vue组件中添加如下代码：
<template>
<div>
<h2>{{ $route.meta.title }}</h2>
<router-link :to="'/article/' + article.id">{{ article.title }}</router-link>
</div>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
article: {}
}
},
created() {
axios.get('/article/detail', {
params: { id: this.$route.params.id }
}).then(res => {
this.article = res.data
})
}
}
</script>
在这里，我们从$route对象上获得meta属性上的title属性的值，然后将它显示在页面上，获得id值，创建一个article对象，并将title绑定到article对象上。在创建完成后，我们通过axios向服务器发送请求并得到details路由上的详细内容。
6. 在App.vue中添加路由出口和路由链接
<template>
<div id="app">
<router-link to="/" tag="h1">首页</router-link>
<hr>
<router-link to="/article" tag="h2">文章</router-link>
<router-link to="/comment" tag="h2">评论</router-link>
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
我们在这里使用了hr标签和标题标签来分隔应用程序的不同路由，并利用router-link标签生成路由链接。
7. 运行应用程序
现在您可以启动应用程序并访问http://localhost:8080 。在文档页面中，您将看到一个标题和一组路由链接。单击'文章'链接，您将进入文章列表，单击文章链接，您将进入文章详情页面。同样，单击'评论'链接您将进入评论列表，并且在单击评论链接之后进入评论详情页面。
总结：
嵌套路由是Vue路由的特殊应用，它利用了组件的嵌套结构来设计视图与组件之间的关系。在Vue多层嵌套路由的实现过程中，我们需要使用组