前言

? ? ? ? 網(wǎng)上找了很多辦法，都需要開發(fā)者在頁面內(nèi)單獨實現(xiàn)，或者是刷新整個瀏覽器，感覺并不是特別舒服。因此，我考慮可以在框架層去實現(xiàn)路由跳轉(zhuǎn)刷新。

? ? ? ? 思路如下：

? ? ? ? ? ? ? ? 1、重定向至臨時界面（用戶無感知）

? ? ? ? ? ? ? ? 2、打開臨時界面時，由于觸發(fā)了TagsView的watch路由事件，判斷是重定向請求界面，于是關(guān)閉已經(jīng)渲染的目標(biāo)界面

? ? ? ? ? ? ? ? 3、進入臨時界面后，再跳回目標(biāo)界面。這時候就可以重新打開新的界面了

步驟1：配置路由信息

// 動態(tài)路由：通過匹配name、path進行重定向的界面
for (const menu of [動態(tài)菜單權(quán)限]) {
    [動態(tài)路由數(shù)組].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：創(chuàng)建重定向空白頁

文件路徑：@/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 關(guān)閉目標(biāo)界面

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：跳轉(zhuǎn)代碼文章來源地址http://www.zghlxwxcb.cn/news/detail-507680.html

// 通過name跳轉(zhuǎn)
this.$router.push({ name: 'redirect/user' })

// 通過path跳轉(zhuǎn)
this.$router.push({ path: '/redirect/user/index' })

到了這里，關(guān)于VUE路由跳轉(zhuǎn)并刷新頁面（框架層實現(xiàn)）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！