vue相同路由跳转强制刷新该路由组件

想必大家在平时开发的时候可能遇到这种需求,在打开该菜单页面的情况下,再次点击菜单需要刷新该组件(销毁再创建)。而vue自身如果路由不变的情况下是不会这样做的,那么只能使用一些骚操作了。

1.在菜单的路由跳转上绑定一个随机query参数,例如时间戳或者随机数:
this.$router.push({
    path:"/xxx",
    query:{
        t:Date.now(),
    },
});

该操作会触发路由改变,但是组件内的状态没有初始化,因为组件没有被重建。

2.在路由容器上绑定key值:
<router-view :key="$route.path + $route.query.t"></router-view>

大功告成,通过key值的变化去强制刷新该组件。

  • 4
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
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路由强制刷新,根据实际需要选择使用。注意在使用强制刷新时,需要对页面数据进行重新加载和处理,避免出现数据的错误和不一致。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值