vue3 的动态路由以及history模式

最新推荐文章于 2024-09-27 09:15:56 发布

小小程序员洋

最新推荐文章于 2024-09-27 09:15:56 发布

阅读量1.1k

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/qq_40257538/article/details/128083280

版权

本文介绍了如何在Vue 3中使用createWebHistory模式配合服务器端（如Nginx）配置，避免#符号导致的接口误识别，并解决了动态路由刷新时的404问题。重点讨论了添加路由的正确方式和刷新时的重定向策略。

摘要由CSDN通过智能技术生成

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()
}