路由的嵌套配置

配置一级路由

• 1. 创建router文件夹，里面添加index.js文件配置以下代码：

import Vue from 'vue'
import VueRouter from "vue-router";
import Layout from '@/views/Layout'
import ArticleDetail from '@/views/ArticleDetail'
Vue.use(VueRouter)
//配置两个一级路由的规则
const router = new VueRouter({routes: [{path: '/',component: Layout},{path: '/detail',component: ArticleDetail}
]
})export default router

2. 在main.js文件中，我们使用我们封装好的router：

import Vue from 'vue'
import App from './App.vue'
import router from './router'Vue.config.productionTip = falsenew Vue({render: h => h(App),router
}).$mount('#app')

3. 在App.vue中配置出口：

<template><div class="h5-wrapper"><!-- 路由出口 --><router-view></router-view></div>
</template>

• 此时一级路由配置完毕

---

### 2.配置二级路由 二级路由和一级路由为嵌套关系

方法： 就是通过children配置项，配规则

1. 在children配置项中，配规则
2. 准备二级路由出口

routes: [{path: '/',component: Layout,children: [{path: '/article',component: Article},{path: '/collect',component: Collect},{path: '/like',component: Like},{path: '/user',component: User}]},//二级路由在指定的一级路由中配置出口，例如这里是首页<!-- 二级路由出口，匹配到的二级路由在此展示 --><router-view></router-view>

在那个一级路由中配置二级路由，就在那个一级路由配置出口。

• 二级路由也就配置完毕了。