vue实现首页导航切换不同路由的方式 vue实现首页导航切换不同路由

vue实现切换首页路由导航，根据切换的不同导航跳转不同的路由，以及当前选中的导航添加选中样式。

文章图片

文章图片

文章图片

文章图片

html代码：

js代码：
data () {
return {
Index: document.location.hash,
}
},
methods: {
checkNav (index) {
this.Index = document.location.hash;
},
}

css代码：
/* 导航栏 */
.indexNavOut{
background-color: #486B8A;
height: 60px;
}
.indexNav{
width: 80%;
margin: 0 auto;
}
.navLi{
display: flex;
}
.navLi li:nth-child(1){
flex: 1.8;
}
.navLi li{
flex: 1;
}
.navLi li a{
text-decoration: none;
color: #fff;
font-size: 16px;
}
.indexNav .icon{
width: 230px;
margin-top: 10px;
}
.indexNav .icon img{
width: 100%;
}
.navLi li {
height: 60px;
line-height: 60px;
position: relative;
}
.navLi li.active{
background-color: rgb(15,36,115);
}
.navLi li:last-child:after{
border-right: none;
}
【vue实现首页导航切换不同路由的方式】转载于:https://www.cnblogs.com/web-aqin/p/10769581.html

vue实现首页导航切换不同路由的方式

推荐阅读

Android竞品分析工具有哪些？ Android竞品分析工具那个更好？

支付宝口令红包能追回吗

竞品分析模板运营,app竞品分析模板

k404

荡胸生层云的曾是什么意思

国通快递全国多少网点快捷快递怎么样

让你的转印作品更加精准惠普转印带对位技巧大揭秘

水暖管件名称大全及图「水暖件都有哪些种类」

风云岛行动阿丽攻略阿丽三种打法教学

微信一笔画完1-8 微信一笔画完小程序1-8画法路线推荐

夏天吃什么蔬菜好

排骨怎么炒好吃又简单

如何以更实惠的价格购买亚马逊服务器？亚马逊服务器怎么购买便宜

怎么吃红枣比较好

android开发学习——day4

并行和并发

林内壁挂炉66代码故障怎么解决林内壁挂炉e6故障码

苹果公司|买手机，选华为还是选苹果看看实体店老板的理性分析，一目了然

linux命令及示例 linux命令技巧

绿豆汤能天天喝吗