![](/assets/img/weixin-blog.311ae013.png)
技术咨询、项目合作、广告投放、简历咨询、技术文档下载
点击这里 联系博主
# Vue路由变化页面没有刷新解决办法
在Vue使用router开发单页面过程中,我们会遇到多次进入同一页面,页面没有刷新的情况。
一个例子:
有一个列表页面和详情页面,当点击列表的每一项,显示详情。你会发现,如果我们单纯的使用this.$router.push({path:"/detail",query:{id:"your id",another:"asasaas"}}),跳转到详情页面,详情页面的数据并没有发生变化。
解决办法:
复用组件时,想对路由参数的变化作出响应的话,你可以简单地 watch (监测变化) $route 对象:
export default{
...
watch: {
'$route' (to, from) {
// 对路由变化作出响应...
if(to.path=="/detail"){
this.initData();
}
}
}
}
或者使用 2.2 中引入的 beforeRouteUpdate 导航守卫:
<template>
<div>
<p>{{id}}</p>
<p>{{another}}</p>
</div>
</template>
<script>
export default {
data() {
return {
id: "",
another: ""
};
},
methods: {
initData(to) {
let query = to.query;
console.log("传递过来的数据", query,to);
this.id = query.id;
this.another = query.another;
}
},
beforeRouteUpdate(to, from, next) {
// 在当前路由改变,但是该组件被复用时调用
// 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
// 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
this.initData(to);
next();
},
mounted(){
this.initData(this.$route);
}
};
</script>
<style>
</style>
- 本文链接: https://mrgaogang.github.io/vue/Vue%E8%B7%AF%E7%94%B1%E5%8F%98%E5%8C%96%E9%A1%B5%E9%9D%A2%E6%B2%A1%E6%9C%89%E5%88%B7%E6%96%B0%E8%A7%A3%E5%86%B3%E5%8A%9E%E6%B3%95.html
- 版权声明: 本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 许可协议。转载请注明出处!