vue-admin-template中实现点击侧边栏刷新页面

一、@/layout/components/Sidebar/Link.vue

<template>
  <!-- eslint-disable vue/require-component-is -->
  <component v-bind="linkProps(to)">
    <slot />
  </component>
</template>

<script>
import { isExternal } from '@/utils/validate';

export default {
  props: {
    to: {
      type: String,
      required: true
    }
  },
  methods: {
    linkProps(url) {
      if (isExternal(url)) {
        return {
          is: 'a',
          href: url,
          target: '_blank',
          rel: 'noopener'
        };
      }
      return {
        is: 'router-link',
        to: 'redirect' + url//添加redirect
      };
    }
  }
};
</script>

二、@/utils/validate.js

/**
 * Created by PanJiaChen on 16/11/18.
 */

/**
 * @param {string} path
 * @returns {Boolean}
 */
export function isExternal(path) {
  return /^(https?:|mailto:|tel:)/.test(path)
}

三、@/router/index.js

{
    path: '/redirect',
    component: Layout,
    hidden: true,
    children: [
      {
        path: '/redirect/:path(.*)',
        component: () => import('@/views/redirect/index')
      }
    ]
  },

四、@/views/redirect/index.vue

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

五、App.vue

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      path: '/'
    };
  },
  watch: {
    $route(to, from) {
      if (to.path.indexOf('redirect') !== -1) {
        this.$router.replace(to.path.replace(/.+?redirect/g, '/redirect'));
      }
      //to代表的是你要跳转的页面，from代表的是原页面，即跳转之前的页面
    }
  }
};
</script>