Vue路由界面强制刷新
需求:当前url:http://localhost:8080/certxxx/app要访问http://localhost:8080/certxxx/app这个Url的时候视图是不刷新的想让他刷新可以使用以下两种做法:一、手动控制刷新(适合想控制刷新某些值需求)1.跳转时添加query属性让url变得不一样2.添加之后还是不会刷新,在要强制刷新的页面里使用watch方法来观察跳转操作手动刷新所需数
·
需求:
当前url:http://localhost:8080/certxxx/app
要访问http://localhost:8080/certxxx/app这个Url的时候视图是不刷新的
想让他刷新可以使用以下两种做法:
一、手动控制刷新(适合想控制刷新某些值需求)
1.跳转时添加query属性让url变得不一样
2.添加之后还是不会刷新,在要强制刷新的页面里使用watch方法来观察跳转操作手动刷新所需数据
二、全刷新页面(就跟默认进来一样)
1.跳转时添加query属性让url变得不一样
2.在添加key属性
下面是实例操作:
一、手动控制刷新
1.<router-link :to="{name:'duanzi',query:{time:new Date().getTime()}}">跳转页面</router-link>
2.在name等于duanzi的页面中使用:
export default {
name:'xxx',
data() {
num:1
},
methods:{
//页面函数
},
mounted:function(){
//钩子生命周期函数
},
watch:{
'$route': function (to, from) {
//做更新操作
this.num=2;
}
}
}
二、全刷新页面
1.<router-link :to="{name:'duanzi',query:{time:new Date().getTime()}}">跳转页面</router-link>
2.<router-view :key="$route.fullPath"></router-view>
$route.fullPath:全路径Url,只要key变化了就刷新页面,由于第一步设置的url后面都加一个时间戳,所以每次的url都是不一样的,也就达到了刷新页面的效果
更多推荐
已为社区贡献9条内容
所有评论(0)