Vue路由界面强制刷新

需求:
当前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都是不一样的,也就达到了刷新页面的效果
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue框架自带router由跳转功能,实现了前端由的实现。在实际开发中,有时候需要强制刷新页面,以便对页面内容进行更新。Vue提供了两种方式实现由跳转强制刷新: 1. 通过由参数添加一个随机数,在由切换时强制刷新。 在由对象的meta属性中添加一个随机数,每次切换由时,强制重新加载页面,代码如下: ``` { path: '/home', name: 'Home', component: Home, meta: { requireAuth: true, refresh: true // 添加一个随机数,强制刷新页面 } } ``` 然后在由切换钩子函数beforeEach中,判断meta中是否有refresh属性,如果有就重新生成一个由地址,如下: ``` router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.requireAuth)) { if (store.getters.token) { if(to.meta.refresh) { // 判断是否刷新页面 to.path += '?refresh=' + Math.random() // 重新生成一个由地址 } next() } else { next({ path: '/login', query: { redirect: to.fullPath } }) } } else { next() } }) ``` 2. 在跳转页面前手动执行window.location.reload()方法,强制刷新页面。 在vue-router由中,通过执行window.location.reload()方法,实现页面的强制更新,代码如下: ``` this.$router.push('/home').catch(err => {}) window.location.reload() ``` 以上两种方式可以实现Vue由的强制刷新,根据实际需要选择使用。注意在使用强制刷新时,需要对页面数据进行重新加载和处理,避免出现数据的错误和不一致。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值