路由的嵌套配置

配置一级路由

• 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 = false

new Vue({
  render: h => h(App),
  router
}).$mount('#app')

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

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

• 此时一级路由配置完毕

方法： 就是通过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>

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

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