vue3 的动态路由 以及history模式

1 vue3 地址访问路由不能是不带#   这样会当做一个服务端接口

  需要服务端配合 以及nignx的重定向

vue-router history模式服务器端配置的方法 - 大数据 - 亿速云

解决nginx配置vue.router项目在createWebHistory模式下访问404问题_bug抗体的博客-CSDN博客

2 vue3的动态路由

一开始很顺利 在beforeeach回调里面加了一个router.addroute 但是发现刷新就不行了

解决方法

这两个操作配合即可正常访问也可以刷新 

自己的理解 next（）正常放行

addRoute之后next({})是参考官网 直接重定向 尝试了一下

官网是这么写的-----如果你决定在导航守卫内部添加或删除路由，你不应该调用 router.replace()，而是通过返回新的位置来触发重定向：

  router.addRoute(generateRoute(to))
    // 触发重定向
    return to.fullPath

这里是我的解决方法 

router.beforeEach(async (to, form, next) => {
 
  let canFilter = await test.request();
 
  if (!router.getRoutes().find((route) => route.path == to.path)) {
 
    router.addRoute({
 
      path: to.path,
 
      name: to.path.substring(1),
 
      component: Sankey,
 
    });
 
 //这里是重点1
    next({
 
      path: to.path,
 
    });
 
  }})
//这里是重点2
 
if(符合条件){
next()
}