Vue跳转同一界面多次，使用不同数据进行渲染

这是经常遇到的一个问题，之前没有注意，有一天进行code Review提了出来。

举个栗子：网上商城想要看商品的详情，就需要通过列表页点击，进入详情页。详情页的数据处理是通过传过来的商品Id获取信息进行绑定渲染。

如果不进行处理，多次打开详情页就会出现问题。

1、如果是在详情页的data中直接进行Id获取，

 

　　然后在create中进行数据获取，那么在不关详情页并多次打开详情页的时候，之后打开的详情页数据都是和第一页相同的，这是因为data是在$vm实例创建之前就会进行赋值，

　　而在第一次打开页面时，就已经创建了实例并对data进行赋值了，之后每次打开都不会再创建；

2、在create中获取传过来的Id,然后调用方法获取数据，这种情况其实和1、原理是差不多的；

3、使用activated（这是和keep-alive协同使用的一个属性，如果没有设置keep-alive ，activated是不存在的），并在activated中进行Id获取和数据方法调用。

　　activated和created什么区别呢？created是创建vm实例时执行，而activated更像是每次新打开这个页面的时候执行。但是这时候还是有问题，那就是在 每次新打开了详情页，

　　而返回旧的详情页时，数据也变成了新打开页面的数据，这是为什么呢，其实就是因为activated是新打开页面时执行。新打开！新打开！新打开！

4、使用watch监听，监听路由！对就是监听路由，当监听到路由转到详情页时，就获取Id并调用数据方法。以下代码GetData()方法中获取Id并获取数据。监听路由和设置activated是互补的操作，新打开页面时，

　　路由不会被监听，这时候利用activated，但是在重复打开本页面时，activated不会被执行，这时候利用路由监听。

　　

watch:{
    "$route"(val,oldval){
                if(val.meta.title=='详情页名字'){
                       this.GetData()
                 }
         }
}
                                                                    

 

 

 

 

以上纯属个人理解，如果 解释有误，欢迎留言指正！只希望能共同进步。

 

转载于:https://www.cnblogs.com/xuanyuandai/p/11052112.html