*vue+element实现动态路由*

vue+element实现动态路由

说明：element导航在点击的时候虽然有文字高亮，但是我们直接在域名那跳转路径，文字高亮却还是停留在上级路由，这时就需要动态路由来监听
需要配置 AA 、BB 的路由

<template>
	<div>
		<el-row>
		  <el-col :span="12">
		    <el-menu
		      :default-active="$route.path"
		      class="el-menu-vertical-demo"
		      @open="handleOpen"
		      @close="handleClose"
			  router>
		      <el-menu-item index="/AA">
		        <i class="el-icon-menu"></i>
		        <span slot="title">AA</span>
		      </el-menu-item>
		      <el-menu-item index="/BB">
		        <i class="el-icon-menu"></i>
		        <span slot="title">BB</span>
		      </el-menu-item>
		    </el-menu>
		  </el-col>
		 
	</div>
</template>

<script>
  export default {
    
    
		data(){
    
    
			return{
    
    
				defaultUrl:'/AA'
			}
		},
		mounted(){
    
    
			let href = window.location.href;
			this.defaultUrl = href.split('/#')[1];
		},
		watch:{
    
    
			'$route':'getPath'
		},
    methods: {
    
    
		getPath(){
    
    
			this.defaultUrl = this.$route.path;
		},
      handleOpen(key, keyPath) {
    
    
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
    
    
        console.log(key, keyPath);
      }
    }
  }
</script>