vue使用vuex实现首页导航切换不同路由的方法


Posted in Javascript onMay 08, 2019

vue实现首页导航切换不同路由的方式(二)【使用vuex实现的】,具体代码如下所示:

<nav>
    <!-- 导航栏 -->
   <div class="indexNavOut">
    <div class="indexNav">
    <ul class="navLi">
     <li @click="checkNav()" style="width: 130px;"><router-link to="/home">了解海华教育(视频)</router-link><!--<a href="#">了解海华教育(视频)</a>--></li>
     <li @click="checkNav()" v-bind:class="{'active':Index=='#/home','active2':Index=='#/'}">
      <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=='#/enrollment'}"><router-link to="/enrollment">招生信息</router-link>
     </li>
     <li @click="checkNav()" v-bind:class="{'active':Index=='#/employment'}"><router-link to="/employment">就业中心</router-link>
     </li>
     <li @click="checkNav()" v-bind:class="{'active':Index=='#/enlist'}"><router-link to="/enlist">在线报名</router-link>
     </li>
     <li @click="checkNav()" v-bind:class="{'active':Index=='#/contact'}"><router-link to="/contact">联系我们</router-link>
     </li>
    </ul>
    </div>
   </div>
   </nav>

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;
 padding-bottom: 17px;
}
.indexNav .icon{
 width: 230px;
 margin-top: 10px;
}
.indexNav .icon img{
 width: 100%;
}
.navLi li {
 height: 60px;
 line-height: 60px;
 position: relative;
}
.navLi li.active a{
 border-bottom: 3px solid #E96463;
}
.navLi li.active2 a{
 border-bottom: 3px solid #E96463;
}
.navLi li:last-child:after{
 border-right: none;
}
.navLi li .line{
 width: 20px;
 height: 3px;
 background: #E96463;
 border: none;
 position: absolute;
 /*top: -14px;*/
 /*right: -32px;*/
 left: 50px;
 top: 45px; 
 z-index: 100;
}

js:

vue使用vuex实现首页导航切换不同路由的方法

 main.js代码:

vue使用vuex实现首页导航切换不同路由的方法

vue使用vuex实现首页导航切换不同路由的方法

vue使用vuex实现首页导航切换不同路由的方法

import Vuex from 'vuex'
Vue.use(Vuex);
const store = new Vuex.Store({
 state: {
 majorDetail: false,
 Index: document.location.hash,//导航条跳转路由样式控制
 },
 mutations: {
 //控制专业介绍详情显示隐藏
 updatemajorDetail(state, majorDetail) {
  state.majorDetail = majorDetail;
 },
 updateIndex(state, Index) {
  state.Index = Index;
 }
 }
});

vue使用vuex实现首页导航切换不同路由的方法

效果图:

vue使用vuex实现首页导航切换不同路由的方法

vue使用vuex实现首页导航切换不同路由的方法

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

vue使用vuex实现首页导航切换不同路由的方法

vue使用vuex实现首页导航切换不同路由的方法

总结

以上所述是小编给大家介绍的vue使用vuex实现首页导航切换不同路由的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
分享精心挑选的12款优秀jQuery Ajax分页插件和教程
Aug 09 Javascript
用innerhtml提高页面打开速度的方法
Aug 02 Javascript
网页实时显示服务器时间和javscript自运行时钟
Jun 09 Javascript
在Mac OS下使用Node.js的简单教程
Jun 24 Javascript
JavaScript function函数种类详解
Feb 22 Javascript
Bootstrap CSS布局之按钮
Dec 17 Javascript
Bootstrap CSS组件之面包屑导航(breadcrumb)
Dec 17 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
Mar 09 Javascript
详谈AngularJs 控制器、数据绑定、作用域
Jul 09 Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
Sep 04 Javascript
vuejs实现ready函数加载完之后执行某个函数的方法
Aug 31 Javascript
vue3.0 自适应不同分辨率电脑的操作
Feb 06 Vue.js
微信小程序封装自定义弹窗的实现代码
May 08 #Javascript
Vue.js轮播图走马灯代码实例(全)
May 08 #Javascript
深入浅析vue-cli@3.0 使用及配置说明
May 08 #Javascript
js实现继承的方法及优缺点总结
May 08 #Javascript
微信小程序人脸识别功能代码实例
May 07 #Javascript
iphone刘海屏页面适配方法
May 07 #Javascript
常见的浏览器存储方式(cookie、localStorage、sessionStorage)
May 07 #Javascript
You might like
PHP源代码数组统计count分析
2011/08/02 PHP
php中mysql模块部分功能的简单封装
2011/09/30 PHP
PHP中的reflection反射机制测试例子
2014/08/05 PHP
php类常量用法实例分析
2015/07/09 PHP
PHP使用PHPExcel删除Excel单元格指定列的方法
2016/07/06 PHP
php使用curl实现简单模拟提交表单功能
2017/05/15 PHP
JavaScript 函数惰性载入的实现及其优点介绍
2013/08/12 Javascript
细说javascript函数从函数的构成开始
2013/08/29 Javascript
jQuery验证插件validate使用详解
2016/05/11 Javascript
AngularJS基础 ng-csp 指令详解
2016/08/01 Javascript
关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
2016/11/30 Javascript
利用Vue.js实现求职在线之职位查询功能
2017/07/03 Javascript
react native 获取地理位置的方法示例
2018/08/28 Javascript
js中的数组对象排序分析
2018/12/11 Javascript
Vue keepAlive 数据缓存工具实现返回上一个页面浏览的位置
2019/05/10 Javascript
jQuery实现推拉门效果
2020/10/19 jQuery
python相似模块用例
2016/03/04 Python
深入解析Python中函数的参数与作用域
2016/03/20 Python
用python写个自动SSH登录远程服务器的小工具(实例)
2017/06/17 Python
Python设计模式之策略模式实例详解
2019/01/21 Python
Python面向对象程序设计构造函数和析构函数用法分析
2019/04/12 Python
Python pandas.DataFrame调整列顺序及修改index名的方法
2019/06/21 Python
使用Python实现跳一跳自动跳跃功能
2019/07/10 Python
在django中使用apscheduler 执行计划任务的实现方法
2020/02/11 Python
python基于win32api实现键盘输入
2020/12/09 Python
Java模拟试题
2014/11/10 面试题
财务出纳员岗位职责
2013/11/26 职场文书
宝宝满月酒主持词和仪式流程
2014/03/27 职场文书
关爱残疾人标语
2014/06/25 职场文书
音乐幼师求职信
2014/07/09 职场文书
2014年平安夜寄语
2014/12/08 职场文书
英文自荐信范文
2015/03/25 职场文书
秋收起义观后感
2015/06/11 职场文书
2015年机关作风和效能建设工作总结
2015/07/23 职场文书
欢送领导祝酒词
2015/08/12 职场文书
卖车协议书范文
2016/03/23 职场文书