解决vue动态路由返回后再点击进去，地址重复叠加

最新推荐文章于 2025-05-15 22:37:21 发布

原创最新推荐文章于 2025-05-15 22:37:21 发布 · 2.1k 阅读

4 ·

CC 4.0 BY-SA版权

vue笔记专栏收录该内容

26 篇文章

订阅专栏

本文详细描述了在Vue项目中使用动态路由跳转时遇到的问题及解决方案，主要问题在于路径配置缺少斜杠，导致点击后无法正确跳转页面。通过调整代码中的path参数，确保其以斜杠开头，解决了跳转失败的问题。

一.问题

1.第一次点击，点击跳转页面后点返回
在这里插入图片描述
2.第二次点击

代码：
vue组件：

<li class="mv-item" v-for="item in MvList" @click="selecMVList(item)"> 
...<!-- 循环MvList数组 -->
</li>

selecMVList(item) {
      this.$router.push({
        path: `search/list/${item.vid}` //item.vid作为动态路由的id
      })
      // 更改radio在state
      this.setMvList(item)
    }

index.js文件：

{
      path: '/search/list/:id',
      component: Mvs
}

二.解决

vue组件路由跳转在path里少了一个"/"符号：
path: /search/list/${item.vid}

selecMVList(item) {
      this.$router.push({
        path: `/search/list/${item.vid}` //item.vid作为动态路由的id
      })
      // 更改radio在state
      this.setMvList(item)
    }

看来看去代码，原来是粗心造成的结果