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 相关文章推荐
文本框的字数限制功能jquery插件
Nov 24 Javascript
Js 去掉字符串中的空格(实现代码)
Nov 19 Javascript
22点关于jquery性能优化的建议
May 28 Javascript
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
Jan 02 Javascript
JavaScript制作简单分页插件
Sep 11 Javascript
JavaScript实现设置默认日期范围为最近40天的方法分析
Jul 12 Javascript
详解如何在vue项目中引入elementUI组件
Feb 11 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
Sep 21 Javascript
vue-cli脚手架搭建的项目去除eslint验证的方法
Sep 29 Javascript
Vue data的数据响应式到底是如何实现的
Feb 11 Javascript
js里面的变量范围分享
Jul 18 Javascript
vue 子组件修改data或调用操作
Aug 07 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读取目录下所有文件的代码
2008/01/07 PHP
php图片处理:加水印、缩略图的实现(自定义函数:watermark、thumbnail)
2010/12/02 PHP
PHP在线打包下载功能示例
2016/10/15 PHP
PHP异步进程助手async-helper
2018/02/05 PHP
jQuery的attr与prop使用介绍
2013/10/10 Javascript
javascript模拟实现C# String.format函数功能代码
2013/11/25 Javascript
通过JS动态创建一个html DOM元素并显示
2014/10/15 Javascript
AngularJS入门教程之AngularJS指令
2016/04/18 Javascript
JS实现的图片预览插件与用法示例【不上传图片】
2016/11/25 Javascript
详解js的六大数据类型
2016/12/27 Javascript
关于Sequelize连接查询时inlude中model和association的区别详解
2017/02/27 Javascript
js实现方块上下左右移动效果
2017/08/17 Javascript
js中apply与call简单用法详解
2017/11/06 Javascript
jQuery 防止相同的事件快速重复触发方法
2018/02/08 jQuery
详解vue-cli项目中的proxyTable跨域问题小结
2018/02/09 Javascript
mint-ui在vue中的使用示例
2018/04/05 Javascript
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339)
2020/09/11 Javascript
[01:03:18]DOTA2-DPC中国联赛 正赛 RNG vs Dynasty BO3 第一场 1月29日
2021/03/11 DOTA
pip 错误unused-command-line-argument-hard-error-in-future解决办法
2014/06/01 Python
用python实现简单EXCEL数据统计的实例
2017/01/24 Python
基于python3 类的属性、方法、封装、继承实例讲解
2017/09/19 Python
Python抓取框架Scrapy爬虫入门:页面提取
2017/12/01 Python
Python模块搜索路径代码详解
2018/01/29 Python
Python3 实现随机生成一组不重复数并按行写入文件
2018/04/09 Python
Python中shapefile转换geojson的示例
2019/01/03 Python
Python+logging输出到屏幕将log日志写入文件
2020/11/11 Python
解决pytorch 数据类型报错的问题
2021/03/03 Python
使用CSS3的font-face字体嵌入样式的方法讲解
2016/05/13 HTML / CSS
使用HTML5拍照示例代码
2013/08/06 HTML / CSS
药学专业大学生个人的自我评价
2013/11/04 职场文书
营业员演讲稿
2013/12/30 职场文书
白银帝国观后感
2015/06/17 职场文书
七一慰问简报
2015/07/20 职场文书
Nginx进程管理和重载原理详解
2021/04/22 Servers
微信小程序 WeUI扩展组件库的入门教程
2022/04/21 Javascript
微软官方消息,在 2023 年 4 月 11 日之后微软将不再为 Office 2013 和 Skype for Business 2015 提供安全更新
2022/04/21 数码科技