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>