Vue單頁SPA後臺管理點擊刷新當前頁面

前言

​ 使用vue都知道 SPA頁面中跳轉當前頁面是不會有反應的,例如 在login頁面使用this.$router.push('login'),頁面是不會出現任何現象的,push的路由也不會進入你是記錄,那麼咱們如何實如今單頁應用的刷新呢?

需求: 點擊左側菜單的當前導航頁面屬性

咱們看一下Vue-router的文檔

導航式編程

router.push() // 添加一個新的記錄
router.replace() // 不會向 history 添加新記錄
router.go(n) //向前或者後退多少步 
複製代碼

很顯然沒刷新當前頁面的api,這個問題,已經有大佬進行了解決,就是TagsView,有興趣的能夠看看實現方法

參考的大佬的思路.在左側菜單導航欄上面也實現了點擊刷新當前頁面

思路

很明顯,單頁應用不存在本身跳轉到本身的api,因此咱們須要藉助中間頁面進行跳轉

1. 建立一箇中間頁面redirect
2. 刷新本身不該該添加到瀏覽記錄裏面,因此使用router.replace(),並攜帶當前頁面的路由路徑
3. 在中間頁面的created函數中獲取攜帶的參數路由路徑,並進行再次router.replace()完成當前頁面的刷新

由於這裏使用的vue-admin-template,因此須要對側邊欄進行一些修改

src\views\layout\components\Sidebar\SidebarItem.vue

<template>
	// ....
      <app-link :to="resolvePath(onlyOneChild.path)">
        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{ 'submenu-title-noDropdown': !isNest }" @click="reload(item)" // 添加點擊方法 >
          <item :meta="Object.assign({}, item.meta, onlyOneChild.meta)" />
        </el-menu-item>
      </app-link>
    </template>
// ....
</template>

<script> export default { methods: { // ... // 點擊重載 reload(item) { // 若是發現當前路由與點擊的路由一致就攜帶路由路徑跳轉到redirect頁面 if (this.$route.name === item.name) { this.$nextTick(() => { // params 默認會解析成爲path字段,若是使用參數的形式 / 會來解析成爲% this.$router.replace({ path: '/redirect' + this.$route.fullPath, }) }) } } }} </script>

複製代碼

建立中轉頁面

src\views\redirect\index.vue

<script>
export default {
  created() {
    console.log(this.$route);
    const { params, query } = this.$route
    const { path } = params
    this.$router.replace({ path: '/' + path, query })
  },
  render: function (h) {
    return h() // avoid warning message
  }
}
</script>
複製代碼

配置路由

{
    path: '/redirect',
    component: Layout,
    name: 'redirect',
    hidden: true,
    children: [
      {
        path: '/redirect/:path*', // path爲默認名稱 通配符*必須存在 反之404
        component: () => import('@/views/redirect/index')
      }
    ]
  }
複製代碼

實現效果

demo已經部署到github,項目地址 vue-element-asyncLogin， 若是對你有幫助，請不要吝嗇你的start~~😄