vue-router中有一种特殊的结构,就是path中带有/:id这种结构的,这种时候vue-router是不会刷新的,我们先来看一个demo:

上面的demo中主要有两个页面,一个列表页,点击查看详情进入学生的详情页,在详情页里面还可以点击其他人的详情,但是你会发现,这里点击是没有效果的。

在详情页点击其他人的详情的时候,其实路径是有发生变化的,但是vue认为是同一个组件,没有更新,这种情况如何解决呢?

监听$route变化

这是最常见的方法了,是可以实现的,关键代码如下:

给router-view设置:key

我们给router-view设置:key='$route.fullPath',这样当路径发生变化的时候,组件会更新,关键代码:

beforeRouteUpdate

这个是vue-router专门为了解决这个问题提供的方案,我们只需要在详情页面监听这个事件,监听到了刷新就好了,关键代码如下:

注意,这个initData要放在$nextTick里面,因为如果直接执行的话,initData获取到的id是上一个页面的,而不是下一个页面的。

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

提交
还可以输入500个字