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~~😄