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

最新推荐文章于 2023-12-04 15:07:11 发布

vicky_yongqi

最新推荐文章于 2023-12-04 15:07:11 发布

阅读量2k

点赞数 5

分类专栏： vue笔记

本文链接：https://blog.csdn.net/vicky_yongqi/article/details/108332062

版权

vue笔记专栏收录该内容

26 篇文章 0 订阅

订阅专栏

一.问题

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

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