vue系列之---- 跳转同一路由,页面不可刷新不可跳转问题解决方案
在项目中经常有这样的需求,同一页面路由根据不同参数,渲染不同数据、不同效果、甚至重新刷新整个页面。但由于路由的强缓存原因,同一路由跳转往往不会进行刷新,故而总结了几种解决办法。方法1:实现原理:点击当前菜单,先跳转过渡空白页面,再跳转原页面;实现优点简单方便快速统一实现缺点所有页面都将进行刷新,且因跳转其他页面故反应时间较长实现代码新建empty.vue<template></t
·
在项目中经常有这样的需求,同一页面路由根据不同参数,渲染不同数据、不同效果、甚至重新刷新整个页面。但由于路由的强缓存原因,同一路由跳转往往不会进行刷新,故而总结了几种解决办法。
方法1:
实现原理:
点击当前菜单,先跳转过渡空白页面,再跳转原页面;
实现优点
简单方便快速统一
实现缺点
所有页面都将进行刷新,且因跳转其他页面故反应时间较长
实现代码
- 新建empty.vue
<template></template>
<script>
export default {
data () {
return {
}
},
created () {
// 获取当前的路由
let path = this.$route.params.link
//替换为原先路由
this.$router.replace({
path: path,
query: {}
})
}
}
</script>
- 新建back路由
{
path: '/back',
name: 'back',
component: () => import(/* webpackChunkName: "back" */ '@/views/empty.vue')
},
- 在菜单点击事件跳转路时增加兼容(点击当前页面才需要先跳转空白页面再返回)
if (this.$route.path == currentNav.path) {
this.$router.push({
name: 'back',
params: {
link: currentNav.path//当前路由
}
})
} else {
this.$router.push(currentNav.path)
}
方法2:
实现原理:
在路由后面添加随机参数监听路由的修改,进而刷新页面
实现优点
可按需加载,即可强制刷新整个页面,也可重新调用页面中的部分方法
实现缺点
代码较为冗余,需要的页面都需要监听修改
实现代码
- 在菜单点击事件跳转路时增加随机参数
this.$router.push({ path: currentNav.path, query: { random:Date.parse(new Date()) } })
- 监听路由修改,在有需要的页面添加
// 监控data中的数据变化
watch: {
$route(to, from) {
if (this.$route.query.random) {
console.info( "加载页面数据" );
}
}
},
//或者使用beforeRouteUpdate 导航位置监听路由变化
beforeRouteUpdate(to, from, next) {
console.info("==当前路由id==" + this.$route.query.id);
if (this.$route.query.random) {
console.info("加载页面数据");
}
next();
},
方法3:
实现原理:
使用router-view时,如果在相同路由之间跳转,默认在跳转路由时会采用缓存策略,并不会刷新当前路由组件。即mounted,beforeDestory等钩子函数并不会触发。
如果想强制刷新,可以在根路由上为其分配一个唯一key。采用$route.fullpath或者时间戳作为其唯一key。这样vue就回认为内部路由每个都是不同的路由,在跳转时便会强制刷新组件
实现优点
简单方便快速统一
实现缺点
所有页面都将进行刷新,效率较差,部分无法生效
实现代码
<router-view :key="$route.fullPath"/>
<router-view :key="Date.parse(new Date())"/>
更多推荐
已为社区贡献10条内容
所有评论(0)