vuejs切换导航栏突出显示的示例(路由菜单突出显示)

总结我的GitHub前端经验。如果你喜欢，请点击星标：谢谢。 https://github.com/liangfengbo/frontend-develop

Vuejs导航栏突出了我的实践：

用数组保存导航栏，用v-for循环，可以减少代码。第二，可以用它的下标来判断高光。第三，还可以获取后端的导航信息进行遍历。重点是：routerLink(index，path)函数，传入当前点击的下标，自定义一个下标，用三元符号判断是否相等。如何解决不高亮或第一次高亮就刷新的问题，很简单，听着

渲染：

Html代码

div class='导航盒'！-导航列表-Li class=' nav-item ' v-for=' nav ' @ click=' router link(index，item.path)' : key=' index '！-judge highlight table-p : class=' navindex===index？item-cn item-cn-active ' : ' item-cn ' ' { { item . title } }/p！-judge highlight table-p : class=' navindex===index？item-en item-en-active ' : ' item-en ' ' { { item . en } }/p/Li/div数据

//导航栏data(){ return { nav :[{ title : ' home page '，en:' code '，path:'/'}，{title :' open source '，en:' source '，path 3: '/' source ' }，{title:' about '，en :' about '，path : '/' about ' }，]，navindex :}}，方法方法：

/* * *路由跳转* @ param index * @ param link */router link(index，path){//单击哪个路由并将其分配给用户定义的下标this.navIndex=index//路由跳转这个。$router.push(path)}，/** *检索当前路径* @ param path */checkrouterlocal(path){//查找此处突出显示的当前路由索引。纳文德克斯=这个。nav . find index(item=item . path===path)；}收听路线变更以获取当前路线

watch : { ' $ route '){//获取当前路径让path=this。$ route.path//检索当前路径this.checkRouterLocal(路径)；}}，css样式。导航框{ display: flex}.nav-item { text-align : center；padding: 0 32px相对位置：display:内联块；font-size : 14px；线高： 25px；}/*导航一般状态*/。item-cn { color : # 1c 2438；font-weight : 800；}/*导航一般状态*/。item-en { color : # 666；font-size : 12px；}/*导航亮点*/。item-cn-active { color : # 2d 8 cf 0；}/*导航亮点*/。item-en-active { color : # 5 cadff；}.导航项目：hover。item-cn { color : # 2d 8 cf 0；}.导航项目：hover。item-en { color : # 5 cadff；}.在{ position: absoluteright : 0；top: 20pxcontent :“”；宽度： 1px；height: 16px背景-color : # f8f8 F8；}.nav-item : after : last-child { width : } 0；}以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。