这个。$router.go(0)

这个。$router.go(0)

这样的话，页面会白一会，体验也不是很好，虽然只是一行代码

location.reload()

location.reload()

这是一样的。画面闪烁时，效果不是很好

提供、注入

3.与提供和注入一起使用

首先，在主页面app.vue上

Home.vue

点火电极

！-//当前路由元中keepAlive为真时，转到此处-

路由器视图v-if=' $ route . meta . keepalive ' class=' home-router '/router-view

/保持活力

！-当当前传入路由元中keepAlive为false时，转到此处。以下如果判断被否定-

路由器-查看v-if='！$ route . meta . keepalive '/路由器视图

App.vue

模板

div id='app '

！-路由器-视图v-if=' isRuraLive '/路由器-视图-

home v-if=' isRuraLiVe '/home

/div

/模板

脚本

从导入主页。/view/home . vue '；

导出默认值{

名称： 'app '，

组件： {

主页

},

提供(){ 0

//在父组件中提供变量，在子组件中注入变量。

返回{

重新加载：这个。重新加载

};

},

数据(){ 0

返回{

isrueralive: true//一个控制视图是否显示的变量

};

},

methods: {

reload(){ 0

this.isRouterAlive=false//先关闭，

这个。$nextTick(函数(){ 0

this.isRouterAlive=true//再次打开

});

}

}

};

/script

在要刷新的页面上导入inject: ['reload']。

调用刷新：

导出默认值{

inject: ['reload']，

}

` this.reload() `//刷新页面

后台页面保持实时缓存问题

在router/index.js中添加路由元信息，并设置要缓存的页面

meta: {

title:'trade.tradeTitle '，

保活：真。//需要缓存该组件

IsBack:false，//用于确定哪一页是上一页

}

钩子函数的执行顺序

不要使用保活

在路由器创建-安装-销毁之前

使用保活

在路由器创建-安装-激活-停用之前

再次进入缓存页面只会触发before route enter-activated-deactivate。创建并装载的将不会再次执行。我们可以使用不同的钩子函数来做不同的事情。理解hook函数的执行时机和顺序很重要，本教程的核心就依赖于这个hook函数

激活和停用是在使用保活之后

在路由器之前

在缓存的页面中，通过beforeRouteEnter钩子函数判断它来自哪个页面

beforeRouteLeave前进(到、从、下一个){ 0

//路线导航挂钩。此时，无法获得组件实例“this ”,因此无法在数据中定义变量(除了使用vm)

//因此，路由元信息中的元字段用于设置变量，便于在各个位置获取。这就是为什么在meta中定义了isBack

if(from . path==='/SnNavigationUp '){ 0

//判断它来自哪条路线，

//刷新数据

to . meta . ISback=false；

} else {

//不刷新

to . meta . ISback=true；

}

next()；

},

数据

数据中定义的变量isFirstEnter用于判断是次进入还是刷新页面，默认值为false

数据(){ 0

返回{

isFirstEnter:false，

};

},

创造

IsFirstEnter在创建时更改为true，表示这是次进入或刷新页面

this.isFirstEnter=true//只有次进入或刷新页面后，才会执行这个钩子函数。//这个钩子函数这个。$nextTick(()={this.getall())输入(两次)后不会执行；});

激活的

在激活中添加判断条件

已激活(){ if (this。$route.meta.isBack ||！this . isfirstander){///如果isBack为false，则表示需要获取新数据，否则不会请求，直接使用缓存的数据。//如果isfirstener为真，说明是次进入此页面或者用户已经刷新页面，需要获取新的数据。});} else { this。$ route . meta . ISback=false this . IsFirstender=false；} },

直接写也可以解决以上问题

已激活(){ this。getall()；},