vue-router4.x实现动态路由

在vue-router 4.x中，api有所更改和增加

1. 动态路由

动态路由主要通过两个函数实现。router.addRoute() 和 router.removeRoute()
注意：addRoute 没有 s ，vue-router 3.x 中是 addRoutes
在 .vue 页面中，添加路由后：需要手动调用 router.replace() 来改变当前的位置，并覆盖我们原来的位置

router.addRoute({ path: '/about', component: About })
// 我们也可以使用 this.$route 或 route = useRoute() （在 setup 中）
router.replace(router.currentRoute.value.fullPath)

2. 路由钩子

vue-router4.x 中 next参数可有可无
如果需要返回值：

false: 取消当前的导航。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。一个路由地址: 通过一个路由地址跳转到一个不同的地址，就像你调用 router.push() 一样，你可以设置诸如 replace: true 或 name: 'home' 之类的配置。当前的导航被中断，然后进行一个新的导航，就和 from 一样。 3. 结合动态路由和路由钩子的项目中动态路由的案例

const getRouter = async () => {
  let accessRoutes = await store.dispatch('permission/getSideBar')
  accessRoutes.forEach(asyncRouter => {
    router.addRoute(asyncRouter)
  })
}
router.beforeEach(async (to, from) => {
  const token = getToken()
  if (token) {
    if(to.path === '/login') {
      return { path: '/' }
    } else {
      const hasMenus = store.getters.permission_menus && store.getters.permission_menus.length > 0
      if (!hasMenus) {
        try {
          await getRouter()
          return { ...to, replace: true }
        } catch(error) {
          await store.dispatch( 'user/resetInfo' )
          return '/login'
        }
      }
    }
  } else {
    if (whiteList.indexOf(to.path) === -1) {
      return `/login?redirect=${to.path}`
    }
  }
})