当前位置： 移动技术网 > IT编程>网页制作>CSS > vue实现首页导航切换不同路由的方式（二）【使用vuex实现的】

vue实现首页导航切换不同路由的方式（二）【使用vuex实现的】

2019年05月01日  | 移动技术网IT编程  | 我要评论 
 1 <nav>
 2                <!-- 导航栏 -->
 3             <div class="indexnavout">
 4               <div class="indexnav">
 5                 <ul class="navli">
 6                   <li @click="checknav()" style="width: 130px;"><router-link to="/home">了解海华教育(视频)</router-link><!--<a href="#">了解海华教育(视频)</a>--></li>
 7                   <li @click="checknav()" v-bind:class="{'active':index=='#/home','active2':index=='#/'}">
 8                       <router-link to="/home">首页</router-link>
 9                   </li>
10                   <li @click="checknav()" v-bind:class="{'active':index=='#/synopsis'}"><router-link to="/synopsis">学校简介</router-link>
11                   </li>
12                   <li @click="checknav()" v-bind:class="{'active':index=='#/major'}"><router-link to="/major">专业介绍</router-link>
13                   </li>
14                   <li @click="checknav()" v-bind:class="{'active':index=='#/campus'}"><router-link to="/campus">校园风采</router-link>
15                   </li>
16                   <li @click="checknav()" v-bind:class="{'active':index=='#/news'}"><router-link to="/news">新闻资讯</router-link>
17                   </li>
18                   <li @click="checknav()" v-bind:class="{'active':index=='#/enrollment'}"><router-link to="/enrollment">招生信息</router-link>
19                   </li>
20                   <li @click="checknav()" v-bind:class="{'active':index=='#/employment'}"><router-link to="/employment">就业中心</router-link>
21                   </li>
22                   <li @click="checknav()" v-bind:class="{'active':index=='#/enlist'}"><router-link to="/enlist">在线报名</router-link>
23                   </li>
24                   <li @click="checknav()" v-bind:class="{'active':index=='#/contact'}"><router-link to="/contact">联系我们</router-link>
25                   </li>
26                 </ul>
27               </div>
28             </div>
29            </nav>

css:

 1 /* 导航栏 */
 2 .indexnavout{
 3   background-color: #486b8a;
 4   height: 60px;
 5 }
 6 .indexnav{
 7   width: 80%;
 8   margin: 0 auto;
 9 }
10 .navli{
11     display: flex;
12 
13 }
14 .navli li:nth-child(1){
15     flex: 1.8;
16 }
17 .navli li{
18     flex: 1;
19 }
20 .navli li a{
21   text-decoration: none;
22   color: #fff;
23   font-size: 16px;
24   padding-bottom: 17px;
25 }
26 
27 .indexnav .icon{
28   width: 230px;
29   margin-top: 10px;
30 }
31 .indexnav .icon img{
32   width: 100%;
33 }
34 
35 .navli li {
36     height: 60px;
37   line-height: 60px;
38   position: relative;
39 }
40 .navli li.active a{
41   border-bottom: 3px solid #e96463;
42     
43 }
44 .navli li.active2 a{
45   border-bottom: 3px solid #e96463;
46     
47 }
48 .navli li:last-child:after{
49   border-right: none;
50 }
51 .navli li .line{
52     width: 20px;
53     height: 3px;
54     background: #e96463;
55     border: none;
56     position: absolute;
57     /*top: -14px;*/
58     /*right: -32px;*/
59     left: 50px;
60     top: 45px;    
61     z-index: 100;
62 }

js:

 

 main.js代码：

 1 import vuex from 'vuex'
 2 vue.use(vuex);
 3 const store = new vuex.store({
 4   state: {
 5     majordetail: false,
 6     index: document.location.hash,//导航条跳转路由样式控制
 7   },
 8   mutations: {
 9     //控制专业介绍详情显示隐藏
10     updatemajordetail(state, majordetail) {
11       state.majordetail = majordetail;
12     },
13     updateindex(state, index) {
14         state.index = index;
15     }
16   }
17 });

 

效果图：

 

 

 

现在在这个页面里点击了解更多的时候跳转到新闻资讯页面，然后然后state里的值，然后改变当前的url以及导航选中新闻资讯。

 

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网