技術標籤：vue.jsvue.jsjavascript

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>