vue导航切换的简单实现

文中效果已在个人网站使用，欢迎大家访问 松果前端

效果图

HTML

代码总共8行，另外还需要自己写一些css样式就可以用了

<!--router-link组件支持用户在具有路由功能的应用中(点击)导航-->
<!--headList为导航栏菜单数据的集合-->
<!--item.to点击后跳转到的地址-->
<router-link v-for="item in headList" :key="item.name" :to="{path:item.to}">
<!--actionHeaderItem为当前点击的菜单的标识，可以从父组件传过来,也可以在当前组件处理-->
<!--s-header-item是菜单的样式，header-item-action是被点击菜单的样式-->
	<div v-if="item.to===actionHeaderItem" class="s-header-item header-item-action">
	<!--{{item.name}}是菜单的名字-->
		<span>{{item.name}}</span>
    </div>
    <div v-else class="s-header-item ">
        <span>{{item.name}}</span>
    </div>
</router-link>

---

（全文完）

欢迎光临：松果前端开发导航

来源：CSDN

作者：Creci

链接：https://blog.csdn.net/qq_20889171/article/details/89340231