Vue路由界面强制刷新

最新推荐文章于 2026-05-09 18:46:56 发布

转载最新推荐文章于 2026-05-09 18:46:56 发布 · 3.2k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://blog.csdn.net/w1213096890/article/details/79916708

收录于

Vue 专栏收录该内容

13 篇文章

订阅专栏

博客围绕访问特定URL时视图刷新问题展开，给出两种解决办法。一是手动控制刷新，适合控制刷新某些值，通过跳转时添加query属性、用watch方法观察跳转操作手动刷新数据；二是全刷新页面，跳转添加query属性并添加key属性，还给出实例操作。

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