Vuejs switch navigation bar highlight (routing menu highlight) method example

My GitHub front end experience summary, I like it, please star: thanks .: https://github.com/liangfengbo/frontend-develop

vuejs navigation bar highlight my practice:

  1. Use a number of sets of navigation bars, cycled with V-for, which can reduce the code, two can use its subscript to determine the highlight, three can also get the rear end navigation Information to traverse
  2. The focus is in: Routerlink (index, path) function, incoming the current click subscript, customize a subscript, determine if it is equal to judge more to a highlight pattern
  3. How to solve the refresh is not highlighted or the first highlight, it is very simple, listening to the current routing is good

The specific code is below

vuejs 切换导航条高亮(路由菜单高亮)的方法示例

  
  • {ipem.title}}

  • DATA data

    // Navigation strip DATA () {return {NAV: [{Title: ‘Home’, en: ‘code’, PATH: ‘/’} , {Title: ‘Open Source’, En: ‘Source’, Path: ‘/ Source’}, {Title: ‘About’, En: ‘About’, Path: ‘/ About’},], Navindex: 0,} },
       
    / ** * Route Jump * @Param Index * @Param Link * / Routerlink (Index, Path) {// Click which route to assign the value to the custom down. THIS.NAVINDEX = Index; // Routing Jump THIS. $ router.push (path)}, / ** * Retrieve the current path * @Param Path * / CheckRouterlocal (PATH) {// Find current routing = this.nav.navindex = this.nav.findIndex (item => item.path === PATH);}

    Listening Routing Change Gets Current Routing
       
    WATCH: {“$ route” () {// Get the current path LET PATH = this. $ Route. PATH; // Retrieves the current path this.checkrouterlocal (PATH);}},
    CSS style

    . Nav-Box {Display: Flex;}. Nav-item {text-align: center; PADDING: 0 32px; Position: Relative; Display: Inline-block; font-size: 14px; line-height: 25px;} / * Navigation normal status * /. Item-cn {color:# 1c2438; font-weight: 800;} / * Navigation normal status * /. Item-en {color: # 666; font-size: 12px;} / * navigation highlight * /. Item-cn-active {color: # 2d8cf0;} / * Navigation highlight * /. Item-en-active {color: # 5cadff;}. Nav-item: hover .Item-cn {color: # 2d8cf0;}. Nav-item: Hover .Item- En {color: # 5cadff;}. Nav-item: after {Position: absolute; Right: 0; Top: 20px; content: '; width: 1px; Height: 16px; Background-Color: # f8f8f8;}. NAV -Item: after: Last-Child {Width: 0;}   The above is all the contents of this article, I hope that everyone will help, I hope everyone will support Tumi cloud. 
    © Copyright Notice
    THE END
    Just support it if you like
    like0
    share
    comment Grab the couch

    Please log in to comment