vueRouter@3x路由问题

二级路由的默认路由

import Layout from '@/layout'
 
export default {
  path: '/approvals',
  component: Layout,
  name: 'approvals',
  children: [
    {
      path: '',//当二级路由配置为空，当访问 /approvals 时 ，不仅会展示Layout组件，还会展示approvals组件
	  
      component: () => import('@/views/approvals'),
      meta: {
        title: '审批',
        icon: 'tree-table'
      }
    }
  ]
}

路由传参

{
  path: '/employees',
  component: Layout,
  name: 'employees',
  children: [
    {
      path: 'detail/:id?', // ?表示id可以传也可以不传
      component: () => import('@/views/employees/detail.vue')
    }
  ]
}

router.addRout()

通过router.addRout()可以动态向路由中添加路由规则,但是调用这个方法后需要使用

next(to.path),否则刷新页面会出现白屏现象

router.beforeEach(async(to, from, next) => {
  if (store.getters.token) {
    if (to.path === '/login') {
      next('/')
    } else {
      if (!store.getters.userId) {
        try {
          // 获取用户信息
          const { roles } = await store.dispatch('user/getUserInfo')
		  // 派发actions修改vuex中的路由规则数组，并得到动态的路由规则数据
          const routes = await store.dispatch(
            'permission/filterRoutes',
            roles.menus
          )
		  //动态向路由中添加路由规则
          router.addRoutes([
            ...routes,
            { path: '*', redirect: '/404', hidden: true }
          ])
          next(to.path)
        } catch (error) {}
      } else {
        next()
      }
    }
  } else {
    if (whiteList.some(x => x === to.path)) {
      next()
    } else {
      next('/login')
    }
  }
  NProgress.done()
})

next()&路由拦截陷入死循环的问题

• router.beforeEach( to , from ,next）

  -to: Route: 即将要进入的目标 路由对象

  -from: Route: 当前导航正要离开的路由

  -next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

  -next(): 表示路由成功，直接进入to路由，不会再次调用router.beforeEach()。

  -next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。

  -next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: 'home' 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。

  -next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

注意：next 方法必须要调用，否则钩子函数无法 resolved。