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 相关文章推荐
把html页面的部分内容保存成新的html文件的jquery代码
Nov 12 Javascript
JavaScript 继承机制的实现(待续)
May 18 Javascript
解读JavaScript中 For, While与递归的用法
May 07 Javascript
js操作table示例(个人心得)
Nov 29 Javascript
JavaScript通过字典进行字符串翻译转换的方法
Mar 19 Javascript
微信小程序教程系列之视图层的条件渲染(10)
Apr 19 Javascript
IScroll5实现下拉刷新上拉加载的功能实例
Aug 11 Javascript
浅谈vue的几种绑定变量的值 防止其改变的方法
Mar 01 Javascript
vue移动端项目缓存问题实践记录
Oct 29 Javascript
vue 使用axios 数据请求第三方插件的使用教程详解
Jul 05 Javascript
Vue3 中的数据侦测的实现
Oct 09 Javascript
Vue使用Proxy代理后仍无法生效的解决
Nov 13 Javascript
微信小程序封装自定义弹窗的实现代码
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 管理系统程序中的后门
2009/08/05 PHP
php Smarty模板生成html文档的方法
2010/04/12 PHP
phpmailer发送邮件之后,返回收件人是否阅读了邮件的方法
2014/07/19 PHP
PHP中使用asort进行中文排序失效的问题处理
2014/08/18 PHP
又一个PHP实现的冒泡排序算法分享
2014/08/21 PHP
详解PHP实现异步调用的4种方法
2016/03/14 PHP
php表单习惯用的正则表达式
2017/10/11 PHP
JSON辅助格式化处理方法
2013/03/26 Javascript
javascript实现获取浏览器版本、操作系统类型
2015/01/29 Javascript
javascript实现仿腾讯游戏选择
2015/05/14 Javascript
jquery中toggle函数交替使用问题
2015/06/22 Javascript
jquery实现简洁文件上传表单样式
2015/11/02 Javascript
前端开发必知的15个jQuery小技巧
2017/01/22 Javascript
JS实现页面打印(整体、局部)
2017/08/18 Javascript
详解如何实现一个简单的Node.js脚手架
2017/12/04 Javascript
基于react后端渲染模板引擎noox发布使用
2018/01/11 Javascript
vue 实现复制内容到粘贴板clipboard的方法
2018/03/17 Javascript
基于mpvue的小程序项目搭建的步骤
2018/05/22 Javascript
详解解决使用axios发送json后台接收不到的问题
2018/06/27 Javascript
js实现炫酷光感效果
2020/09/05 Javascript
python的几种开发工具介绍
2007/03/07 Python
Python实现的字典排序操作示例【按键名key与键值value排序】
2018/12/21 Python
Python线程协作threading.Condition实现过程解析
2020/03/12 Python
日本卡普空电视游戏软件公司官方购物网站:e-CAPCOM
2018/07/17 全球购物
行政助理岗位职责
2013/11/10 职场文书
会计专业应届生自荐信
2014/02/07 职场文书
小学安全工作汇报材料
2014/08/19 职场文书
纪念九一八事变演讲稿:牢记历史,捍卫主权
2014/09/14 职场文书
授权委托书样本
2014/09/25 职场文书
乡镇防汛工作汇报
2014/10/28 职场文书
国庆庆典邀请函
2015/02/02 职场文书
2015年乡镇扶贫工作总结
2015/04/08 职场文书
清明扫墓感想
2015/08/11 职场文书
少先队中队工作总结
2015/08/14 职场文书
浅谈Python numpy创建空数组的问题
2021/05/25 Python
Python读取和写入Excel数据
2022/04/20 Python