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

问题描述：

今天做项目的时候，遇到了一个坑：在项目任何一个页面刷新时，都会莫名其妙跳转到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',
   },
  ],
 },