前言
网上找了很多办法，都需要开发者在页面内单独实现，或者是刷新整个浏览器，感觉并不是特别舒服。因此，我考虑可以在框架层去实现路由跳转刷新。
思路如下：
1、重定向至临时界面（用户无感知）
2、打开临时界面时，由于触发了TagsView的watch路由事件，判断是重定向请求界面，于是关闭已经渲染的目标界面
3、进入临时界面后，再跳回目标界面。这时候就可以重新打开新的界面了
步骤1：配置路由信息
// 动态路由：通过匹配name、path进行重定向的界面
for (const menu of [动态菜单权限]) {
[动态路由数组].push({
path: '/redirect' + menu.uri,
component: () => import('@/views/frame/redirect/index'),
name: 'redirect/' + diyRoutes[menu.uri].name,
hidden: true
})
}
// 固定路由：通过正则匹配所有重定向请求
export const constantRoutes = [
{
path: '/redirect',
component: Layout,
hidden: true,
children: [
{
path: '/redirect/:path(.*)',
component: () => import('@/views/frame/redirect/index')
}
]
}
}
步骤2：创建重定向空白页
文件路径：@/views/frame/redirect/index.vue
<script>
export default {
created() {
if (this.$route.name && this.$route.name.startsWith('redirect/')) {
const path = this.$route.path.substring(9)
this.$router.replace({ path: path, params: this.$route.params, query: this.$route.query })
} else {
this.$router.replace({ path: '/' + this.$route.params.path, params: this.$route.params, query: this.$route.query })
}
},
render: function(h) {
return h() // avoid warning messageN
}
}
</script>
步骤3：TagsView/index.vue 关闭目标界面文章来源：https://www.toymoban.com/news/detail-507680.html
watch: {
$route() {
// 如果是重定向到界面，需要重新打开渲染界面
if (this.$route.path.startsWith('/redirect/')) {
const path = this.$route.path.substring(9)
// 获取route对象
for (const route of this.$store.state.tagsView.visitedViews) {
if (route.path === path) {
this.closeSelectedTag(route)
break
}
}
} else {
this.addTags()
this.moveToCurrentTag()
}
},
}步骤4：跳转代码文章来源地址https://www.toymoban.com/news/detail-507680.html
// 通过name跳转
this.$router.push({ name: 'redirect/user' })
// 通过path跳转
this.$router.push({ path: '/redirect/user/index' })到了这里，关于VUE路由跳转并刷新页面（框架层实现）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
