vue-element-admin 点击左侧路由就刷新

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" />

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值