Vue-vue-router（二）嵌套路由

在vue-router（一）中已经提到过，路由匹配的组件将会渲染到router-view/router-view中而在渲染的组件中，同样也可以通过嵌套路由渲染组件。div id=approuter-view/router-view/divconst home = {...

在vue-router（一）中已经提到过，路由匹配的组件将会渲染到<router-view></router-view>中

而在渲染的组件中，同样也可以通过嵌套路由渲染组件。

<div id="app">
    <router-view></router-view>
</div>

const home = {
    template: '<div>this is home</div>'
};

const router = new VueRouter({
    routes: [{
        path: '/home', 
        component: home
        }
    ]
})

在App.vue中的<router-view>是最顶层的出口，用来渲染最高级路由匹配的组件，此时为home.vue组件。而在home.vue中，还可以渲染嵌套路由匹配到的组件。

const home = {
    template: `
        <div>
            <span>this is home</span>
            <router-view></router-view>
        </div>`
};

const router = new VueRouter({
    routes: [{
        path: '/home', 
        component: home,
        children: {
            path: 'home1',
            component: () => import('../views/home/home1.vue'),
            name: 'home1',
            meta: {
               title: 'home1',
           }
        }
    }]
})

在home.vue中使用<router-view>，可以在嵌套的出口中渲染组件，需要在VueRouter的参数中使用children配置

children的配置与routes的配置类似，都需要path,component，此外还有meta属性

定义属性如下所示

{
  path: '/permission',
  component: Layout,
  redirect: '/permission/index', //重定向地址，在面包屑中点击会重定向去的地址
  hidden: true, // 不在侧边栏显示
  alwaysShow: true, //一直显示根路由
  meta: { roles: ['admin','editor'] }, //你可以在根路由设置权限，这样它下面所有的子路由都继承了这个权限
  children: [{
    path: 'index',
    component: ()=>import('permission/index'),
    name: 'permission',
    meta: {
      title: 'permission',
      icon: 'lock', //图标
      roles: ['admin','editor'], //或者你可以给每一个子路由设置自己的权限
      noCache: true // 不会被 <keep-alive> 缓存
    }
  }]
}

原则上，有多少级路由嵌套就要有多少个<router-view>