vue使用状态管理实现首页导航切换不同路由的方法

某视频剪辑软件实现首页导航切换不同路由的方式（二)【使用状态管理实现的】,具体代码如下所示：

导航！-导航栏-div class=' indexNavOut ' div class=' indexNav ' ul class=' navLi ' Li @ click=' CheckNav()' style=' width : 130 px；'路由器-链接到="/home "了解海华教育（视频)/路由器-链接！- a href='# '了解海华教育（视频)/a-/Li Li @ click=' CheckNav()' v-bind : class=' { ' active ' : index==' #/home '，' active 2 ' : index==' #/' } ' router-link to='/home '首页/router-link/Li Li @ click=' CheckNav()' v-bind : class=' { ' active ' : index==' #/syndrome ' } 路由器链接到=“/校正子”学校简介/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/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==' #/registration ' } 路由器-链接到='/registration '招生信息/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==' #/登记} '路由器-链接到='/登记'在线报名/router-link/Li Li @ click=' CheckNav()' v-bind : class=' { ' active ' : index==' #/contact ' } ' router-link to='/contact '联系我们/路由器链接/Li/ul/div/div/navcss :

/* 导航栏*/.indexNavOut {底色： # 486 B8A高度： 60px}.indexNav { width : 80%；margin: 0 auto}。navLi { display: flex}。navLi Li : th-child(1){ flex : 1.8；}.Li Li导航{ flex : 1；}.navLi阿利{文本-装饰：无；color : # ffffont-size : 16px；填充-底部： 17px}.索引导航。图标{ width : 230 pxmargin-top : 10px；}.索引导航。图标img { width : 100%；}.navLi li { height: 60px线高： 60px相对位置：}.李。活动a {边框-底部： 3px实心# e 96463}.李。active2 a {边框-底部： 3px实心# e 96463}.navLi Li :最后一个孩子：后{边框-右侧：无；}.navLi li .线{ width: 20pxheight: 3px背景技术# E96463border:无；绝对位置：/* top :-14px；*//*右：-32px；*/左侧： 50pxtop : 45 pxz-index : 100；}js:

main.js代码：

从vuex'Vue.use(Vuex)导入Vuexconst store=new Vuex .存储({ state : { main detail : false，index :文档。位置。哈希，//导航条跳转路由样式控制},比照： { //控制专业介绍详情显示隐藏更新主要细节(状态，主要细节){状态。主要细节=主要细节；}，updateIndex(状态，索引){州政府.索引=索引；} }});

效果图：

现在在这个页面里点击了解更多的时候跳转到新闻资讯页面，然后然后状态里的值，然后改变当前的全球资源定位器(统一资源定位符)以及导航选中新闻资讯。

总结

以上所述是小编给大家介绍的某视频剪辑软件使用状态管理实现首页导航切换不同路由的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！