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

快来打我* 2022-01-06 16:27 241阅读 0赞

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

![1275081-20190425170137438-1709363504.png][]

![1275081-20190425170207131-1168993659.png][]

![1275081-20190425170240574-552774891.png][]

![1275081-20190425170309870-2047502278.png][]

** html代码：**

<nav>  
  
<div class="indexNavOut">  
<div class="indexNav">  
<ul class="navLi">  
<li style="width: 130px;"><a href="\#">了解海华教育(视频)</a></li>  
<li @click="checkNav()" v-bind:class="\{'active':Index=='\#/home'\}"><router-link to="/home">首页</router-link></li>  
<li @click="checkNav()" v-bind:class="\{'active':Index=='\#/synopsis'\}"><router-link to="/synopsis">学校简介</router-link></li>  
<li @click="checkNav()" v-bind:class="\{'active':Index=='\#/major'\}"><router-link to="/major">专业介绍</router-link></li>  
<li @click="checkNav()" v-bind:class="\{'active':Index=='\#/campus'\}"><router-link to="/campus">校园风采</router-link></li>  
<li @click="checkNav()" v-bind:class="\{'active':Index=='\#/news'\}"><router-link to="/news">新闻资讯</router-link></li>  
<li @click="checkNav()" v-bind:class="\{'active':Index=='\#/partner'\}"><router-link to="/partner">招生信息</router-link></li>  
<li @click="checkNav()" v-bind:class="\{'active':Index=='\#/aa'\}"><router-link to="/aa">就业中心</router-link></li>  
<li @click="checkNav()" v-bind:class="\{'active':Index=='\#/bb'\}"><router-link to="/bb">在线报名</router-link></li>  
<li @click="checkNav()" v-bind:class="\{'active':Index=='\#/cc'\}"><router-link to="/cc">联系我们</router-link></li>  
</ul>  
</div>  
</div>  
</nav>

*<router-view/>*

**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;  
\}

转载于:https://www.cnblogs.com/web-aqin/p/10769581.html

[1275081-20190425170137438-1709363504.png]: /images/20211227/a36299c0d4144f24b9222f92ab0ea24d.png
[1275081-20190425170207131-1168993659.png]: /images/20211227/56541d5870414400b979f89b53f1ff29.png
[1275081-20190425170240574-552774891.png]: /images/20211227/8141da56f0734f1fa2b6d7ee765a48b6.png
[1275081-20190425170309870-2047502278.png]: /images/20211227/7a95fc2714a241619ccd056daec93693.png