vue-router的子路由的path

715 阅读1分钟

Vue.use(Router)
let constRouter = new Router({
  mode: 'history',
  routes: [
    {
      path: '/dashBoard',
      component: () => import('@/views/DashBoard'),
      children: [
        {
          path: '',
          redirect: 'home'
        },
        {
          path: 'home',
          name: 'home',
          component: () => import('@/components/Home'),
          meta: {}
        }, {
          path: 'index_manager',
          name: 'index_manager',
          component: () => import('@/views/report/IndexManager'),
          meta: {}
        }
      ],
      meta: {}
    }, {
      path: '/home',
      name: 'home',
      component: () => import('@/components/Home'),
      meta: {}
    }, {
      path: '/login',
      name: 'login',
      component: () => import('@/components/Login'),
      meta: {}
    }, {
      path: '/menu',
      name: 'menu',
      component: () => import('@/components/MenuBar'),
      meta: {}
    }, {
      path: '/templateList',
      name: 'templateList',
      component: () => import('@/views/TemplateList'),
      meta: {}
    }
  ]
})
/**
 * 逻辑处理
 */
constRouter.beforeEach((to, from, next) => {
  const flag = false
  if (flag) {
    console.log(to)
    console.log(from)
    console.log(next)
  }

  next()
})
export default constRouter

  • 同级路由的path不能重复,不然后面的会覆盖前面的
  • 子路由的path不能加/ ,/ 代表根目录。子路由的path直接写