VUE路由跳转并刷新页面（框架层实现）

前言

        网上找了很多办法，都需要开发者在页面内单独实现，或者是刷新整个浏览器，感觉并不是特别舒服。因此，我考虑可以在框架层去实现路由跳转刷新。

        思路如下：

                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 关闭目标界面

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：跳转代码

// 通过name跳转
this.$router.push({ name: 'redirect/user' })

// 通过path跳转
this.$router.push({ path: '/redirect/user/index' })