Vue页面刷新时路由异常跳转怎么解决？——vue踩坑之路

最新推荐文章于 2024-08-12 17:09:58 发布

时安。

最新推荐文章于 2024-08-12 17:09:58 发布

阅读量2.1k

点赞数 4

分类专栏： Vue 文章标签： vue vue.js

本文链接：https://blog.csdn.net/weixin_48648219/article/details/116077107

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在Vue项目中遇到页面刷新时自动跳转到特定路由的问题，原因是子路由配置错误。当一个子路由需要参数时，不能仅用`:buzhou`，而应在其前添加非参数部分，如`a1/:buzhou`。通过修改路由配置，将`:buzhou`改为`a1/:buzhou`，解决了路由异常跳转的问题，确保页面正常刷新。

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

问题描述：

今天做项目的时候，遇到了一个坑：在项目任何一个页面刷新时，都会莫名其妙跳转到name为‘startS_right’的路由中，导致页面无法正常刷新。

原因分析：

于是我去检查了路由，发现出错部分的路由部分代码如下：

{
  path: "/:choice/:canshu", 
  component:start,
  name:'start',
  children: [
    {			
    path: ":buzhou",    //修改前，包含参数，不能直接写为“:buzhou”，而应该写为"XXX/:buzhou"
    component:start_right,
    name:'startS_right',
   },
    {
    path: "question", 
    component:question,
    name:'question',
   },
  ],
 },

这是一个嵌套路由，不带参数的子路由question的path可以直接写为path: “question”，但是另一个子路由start_right带有参数，不能直接写为path: “:buzhou”，而应该在其前面加上一个非参数部分，如path: “a1/:buzhou”

解决方案：

将path: ":buzhou"改为path: "XXX/:buzhou"即可。

{
  path: "/:choice/:canshu", 
  component:start,
  name:'start',
  children: [
    {			
    path: "a1/:buzhou",   //修改后
    component:start_right,
    name:'startS_right',
   },
    {
    path: "question", 
    component:question,
    name:'question',
   },
  ],
 },