vue+element后台管理系统 侧导航点击和刷新显示高亮的问题

最进用vue +element 写一个后台管理系统,遇到一个问题。需求是这样的,要求侧导航点击后跳转到路由,每点击的一项都要保持高亮状态,侧导航栏中,只能保证一个展开的窗口,还有就是刷新后,也要保证所对应路由的那个侧导航显示高亮。`

```
export default {
  data () {
    return {
      currentMenu:'/home',
      isCollapse: true
    }
  },
  created(){
    this.getUrl();
  },
  methods:{
    getUrl(){
      let _this = this;
      // let currentUrl = window.location.href;
      _this.currentMenu = `/${this.$route.path.split('/')[1]}`
      console.log(`/${this.$route.path.split('/')[1]}`)
    }
  },
  watch:{
    $route(to,from){
      console.log(to.path);
      this.getUrl();
    }
  }
}

unique-opened  这个设置  是只显示展开一项。
index='url',这里index 对应的是跳转的路径。
用 watch 监听路由的变化情况,调用每次路径变化的方法,达到不管是否刷新 都可以显示高亮。

你可能感兴趣的:(vue)