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>