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 插件之仿“卓越亚马逊”首页弹出菜单效果
Dec 25 Javascript
javascript取消文本选定的实现代码
Nov 14 Javascript
jquery js 重置表单 reset()具体实现代码
Aug 05 Javascript
Javascript常用字符串判断函数代码分享
Dec 08 Javascript
jquery实现的Banner广告收缩效果代码
Sep 02 Javascript
JavaScript必知必会(九)function 说起 闭包问题
Jun 08 Javascript
BackBone及其实例探究_动力节点Java学院整理
Jul 14 Javascript
浅谈AngularJS中使用$resource(已更新)
Sep 14 Javascript
JavaScript实现邮箱后缀提示功能的示例代码
Dec 13 Javascript
vue-router启用history模式下的开发及非根目录部署方法
Dec 23 Javascript
JS实现扫码枪扫描二维码功能
Jan 03 Javascript
基于JavaScript实现留言板功能
Mar 16 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/04/09 PHP
PHP/ThinkPHP实现批量打包下载文件的方法示例
2017/07/31 PHP
laravel5实现微信第三方登录功能
2018/12/06 PHP
编写高性能的JavaScript 脚本的加载与执行
2010/04/19 Javascript
JQuery优缺点分析说明
2011/04/10 Javascript
windows系统下简单nodejs安装及环境配置
2013/01/08 NodeJs
JS表的模拟方法
2015/02/05 Javascript
实例详解jQuery Mockjax 插件模拟 Ajax 请求
2016/01/12 Javascript
基于Node.js实现nodemailer邮件发送
2016/01/26 Javascript
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
2016/03/09 Javascript
vue双向绑定的简单实现
2016/12/22 Javascript
详谈js中window.location.search的用法和作用
2017/02/13 Javascript
详解Vue路由开启keep-alive时的注意点
2017/06/20 Javascript
Express下采用bcryptjs进行密码加密的方法
2018/02/07 Javascript
简单分析js中的this的原理
2019/08/31 Javascript
js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】
2019/11/07 Javascript
vue-cli3.X快速创建项目的方法步骤
2019/11/14 Javascript
Vue的Options用法说明
2020/08/14 Javascript
[03:12]完美世界DOTA2联赛PWL DAY7集锦
2020/11/06 DOTA
解决Django生产环境无法加载静态文件问题的解决
2019/04/23 Python
PyQt5实现暗黑风格的计时器
2019/07/29 Python
python图像处理模块Pillow的学习详解
2019/10/09 Python
Python list与NumPy array 区分详解
2019/11/06 Python
Python partial函数原理及用法解析
2019/12/11 Python
Pytest mark使用实例及原理解析
2020/02/22 Python
Python各种扩展名区别点整理
2020/02/27 Python
python如何处理程序无法打开
2020/06/16 Python
pycharm全局搜索的具体步骤
2020/07/28 Python
Spartoo英国:欧洲最大的网上鞋店
2016/09/13 全球购物
英国领先的家庭时尚品牌:Peacocks
2018/01/11 全球购物
CHARLES & KEITH台湾官网:新加坡时尚品牌
2019/07/30 全球购物
如何写好优秀的创业计划书
2014/01/30 职场文书
教师个人自我评价范文
2014/04/13 职场文书
交通志愿者活动总结
2014/06/27 职场文书
社区母亲节活动总结
2015/02/10 职场文书
Mysql将字符串按照指定字符分割的正确方法
2022/05/30 MySQL