vue路由跳转name重复时发生的错误

路由的name是路由对象中的一个配置选项，类似于下面这样的：

const router = new VueRouter({
  routes:[
      {
       path:"info",
       name:"info",
       component:info
    }
]
})
 
// 假如我们有个动态路由:
const router = new VueRouter({
  routes:[
      {
       path:"/book/:bookId",
       component:Book
    }
]
})
/*
* 有时候，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。
* 你可以在创建 Router 实例的时候，在 `routes` 配置中给某个路由设置名称。
*/
const router = new VueRouter({
  routes:[
      {
       path:"/book/:bookId",
       name:"book",
       component:Book
    }
]
})
// 现在你可以这样处理路由导航:
router.push({ name:"book" , params:{ bookId:123 }})
<router-link :to=" { name:"book" , params:{ bookId:123 }} ">BOOK</router-link>

项目中遇到路由跳转时，path发生变化导致页面展示错误的问题。

// eg：假设定义的路由为
const router = new VueRouter({
  routes:[
      {
       path:"/user/info",
       name:"info",
       component:userInfo
      },
      {
       path:"/book/info",
       name:"info",
       component:bookInfo
      }
    ]
})

this.$router.push ({
       path:"/book/info",
       name:"info",
      })
// 路由跳转会发生错误 会跳转到/user/info

总结：

1. router中的name相当于该路径的别名，为了方便找到他，有时候可以不设置name，比如一个人的名字太长了，你可以取一个短的别名，当你准备跳转时，直接用这个别名就可以了；
2. 当psuh(对象)时，name和path同时存在会优先根据name去找寻path来进行跳转；
3. name作为别名也需要保证它的唯一性，不然会导致找寻路径时出现错误；
4. 无论是否需要使用路由的name,都建议给他写上,当你需要的时候就非常有用了,这是一个建议做法。