6-1子路由

六、子路由-嵌套路由

6-1 配置子路由

//Tips:在主路由的chilren属性中去配置

const routes = [
  {
    path: '/films',
    name: 'films',
    component:()=>import('../views/Films.vue'),
    children:[
      {
        path:'nowPlaying',
        component:()=>import('../views/NowPlaying.vue')
      },{
        path:'comingSoon',
        component:()=>import('../views/ComingSoon.vue')
      }
    ]，
    redirect:"/home/nowplaying" // 固定首先显示的那个页面
  }
]

6-2 在主路由对应的组件中去设置router-view

目的:router-view去装载这些子路由。router-view本质上就是一个动态组件。

//在Films.vue组件中去配置

七、路由重定向

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' }
  ]
})