vue 路由高亮

我在做项目中，经常使用路由高亮，目前为止我学会了两种

1，采用 路由 linkActiveClass 的属性，

1，在 router.js 中加上 linkActiveClass 属性

const router = new Router({
  linkActiveClass:"nav-active",
  routes: [
    {
      path: '/',
      redirect: '/first'
    },
    {
      path: '/first',
      name:"first",
      component: () => import(/* webpackChunkName: "about" */ './../components/first.vue'), 
   },
    {
      path: '/two',
      name:'two',
      component: () => import(/* webpackChunkName: "about" */ '@/components/two.vue'), 
    } 
  ]
})

2，页面中路由的显示

<router-link to="/first" class="nav-child">首页</router-link>
<router-link to="/two" class="nav-child">产品</router-link>

.nav-active:hover {
  border-bottom: 4px #1cb3fc solid;
}

2，采用添加属性设置高亮图标

1，路由高亮 — 路由高亮，当跳转到当页面，绑定一个属性
注：curr，是其他页面传值过来的，当传过来的值 等于 他的高亮名，则高亮

 <div class="ly fl-r">
    <div class="ly h100 al-c">
      <a href="javascript:void(0);"  v-for="(item,i) in list" :key="i" 
        :class="{'header-title-link': curr == item.highlightName}"
        @click="$router.push(item.path)"
      >{{item.name}}</a> 
    </div> 
 </div>
// 当curr==高亮名时候，增加一个属性
    
export default {
  props: { // 首先要接收 其他页面中的 curr 这个变量
       curr: String  
  },
  data() {
    return {
      list: [ //给每一个路由增加一个高亮名
        { 
          highlightName: "home", 
          name: "首页",
          path: "/"
        },
        {
          highlightName: "product",
          name: "产品",
          path: "/product"
        }, {
          highlightName: "apply",
          name: "免费申请",
          path: "/apply"
        }
      ]
    };
  }, 
};
 
.header-title-link {
  border-bottom: 4px solid #3296fa;
}