Vue实现导航切换

Vue实现导航切换：

<template>
  <div>
	  
	  <div class="dbox">
		  <span @click="go('/')" :class="{'active':isActive=='/'}">指令</span>
		  <span @click="go('/demo')" :class="{'active':isActive=='/demo'}">事件</span>
		  <span @click="go('/todolist')" :class="{'active':isActive=='/todolist'}">ToDolist</span>
		  <span @click="go('/liuyan')" :class="{'active':isActive=='/liuyan'}">留言板</span>
	  </div>
	  
	<router-view></router-view>
	
  </div>
</template>

<script>
	export default{
    
    
		data(){
    
    
			return{
    
    
				isActive:window.location.pathname//默认被选中的导航的路由
			}
		},
		methods:{
    
    
			go(url){
    
    
				this.$router.push({
    
    
					path:url
				})
				this.isActive = url
			}
		}
	}
</script>

<style scoped="scoped">
	.dbox{
    
    
		display: flex;
		justify-content: space-around;
	}
	.active{
    
    
		color: greenyellow;
	}
	span{
    
    
		cursor: pointer;
	}
</style>