router-link 列表多次加载

vue router-link 列表多次刷新

一个列表中使用到了router-link ，每一行都有一个router-link，跳转到其他页面（每一个页面的路径是相同的，只是参数不一样），第一次点击能进入钩子函数（created、mounted），后续点击其他行不能进入这些钩子函数。

他人经验

搜索其他经验说是需要打开点击事件，具体实现方式如下：

<router-link :to="{path:'/goods/detail',query: {id: record.id}}" @click.native="clickEvent" :key="record.id" style="color: rgba(0, 0, 0, 0.65);">{{record.title}}</router-link>

//methods中：
 clickEvent(e){
   //this.$router.push(e.target.getAttribute("href"))//相对路径
   this.$router.push(e.toElement.baseURI)//绝对路径
}

此种方式在静态页面中，是可以实现，但是在框架中会被拦截。直接报404。

最终解决

只需到to对应的页面中，添加如下代码即可：

  watch:{
    '$route'(to, from) {
      if (to.name === 'goods-detail') {
        this.id = this.$route.query.id;
        this.loadDetail();//重新加载数据
      }
    }

  },

原因：路径虽然不一样，但是路由是相同的，vue会认为是同一个页面，不会重新加载，会复用已加载过的页面，所以created等钩子函数不会加载。

文章资料链接