【Vue】面经基础版-二级路由配置

二级路由也叫嵌套路由，当然也可以嵌套三级、四级…

使用场景

当在页面中点击链接跳转，只是部分内容切换时，我们可以使用嵌套路由

语法

• 在一级路由下，配置children属性即可
• 配置二级路由的出口

1.在一级路由下，配置children属性

注意:一级的路由path 需要加 / 二级路由的path不需要加 /

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Layout,
      // 跟routes一样，也是数组里面包对象的格式
      children:[
        //children中的配置项 跟一级路由中的配置项一模一样 
        // 这里跳转的路径不会加上根组件的路径
        {path:'xxxx',component:xxxx.vue},
        {path:'xxxx',component:xxxx.vue},
      ]
    }
  ]
})

技巧：二级路由应该配置到哪个一级路由下呢？

这些二级路由对应的组件渲染到哪个一级路由下，children就配置到哪个路由下边

2.配置二级路由的出口

注意： 配置了嵌套路由，一定配置对应的路由出口，否则不会渲染出对应的组件

Layout.vue

  
    
      
    
  ....
  

代码实现

router/index.js

...
import Article from '@/views/Article.vue'
import Collect from '@/views/Collect.vue'
import Like from '@/views/Like.vue'
import User from '@/views/User.vue'
...

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Layout,
      redirect: '/article',
      children:[
        {
          path:'/article',
          component:Article
        },
        {
          path:'/collect',
          component:Collect
        },
        {
          path:'/like',
          component:Like
        },
        {
          path:'/user',
          component:User
        }
      ]
    },
    ....
  ]
})

Layout.vue