需求:
当前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都是不一样的,也就达到了刷新页面的效果
Logo

前往低代码交流专区

更多推荐