1.在router里面加上路径
{
path: '/redirect', // 重定向路由
// component: () => import('@/views/layout/components/Sidebar/redirect'), hidden: true
component: Layout,
hidden: true,
children: [{
path: '',
component: () => import('@/layout/components/Sidebar/redirect')
}]
},
2.在layout/components/Sidebar/redirect 加上redirect.vue 文件
内容
<script>
export default {
beforeCreate() {
const { query } = this.$route
const path = query.path
this.$router.replace({ path: path })
},
mounted() {},
render: function(h) {
return h() // avoid warning message
}
}
</script>
3.修改 layout/components/Sidebar/link.vue
<template>
<component :is="type" v-bind="linkProps(to)" @click="testClick(to)">
<slot />
</component>
</template>
<script>
import { isExternal } from '@/utils/validate'
export default {
props: {
to: {
type: String,
required: true
}
},
computed: {
isExternal() {
return isExternal(this.to)
},
type() {
if (this.isExternal) {
return 'a'
}
return 'router-link'
}
},
methods: {
testClick(url) {
// 通过重定向空白路由页面实现当前菜单刷新
if (JSON.parse(sessionStorage.getItem('defaultActive')) === url) {
// 点击的是当前路由 手动重定向页面到 '/redirect' 页面
sessionStorage.setItem('defaultActive', JSON.stringify(url))
const fullPath = encodeURI(url)
this.$router.replace({
path: '/redirect',
query: {
path: encodeURI(fullPath)
}
})
} else {
sessionStorage.setItem('defaultActive', JSON.stringify(url))
// 正常跳转
this.$router.push({
path: url
})
}
},
linkProps(url) {
return {
is: 'div'
}
}
// linkProps(to) {
// if (this.isExternal) {
// return {
// href: to,
// target: '_blank',
// rel: 'noopener'
// }
// }
// return {
// to: to
// }
// }
}
}
</script>
4.在app.vue 里面加上 :key="$route.path" 如果需求已经达到,最后这步可不写
<router-view :key="$route.path" />