router-link 使用精确匹配

本来不想写router 规则匹配的问题，有一个笨球问，顺带写一下，

 

先配置一下路由

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Index',
      component: Index
    },
    {
        path: '/mall',
        name: 'Mall',
        component: Mall
    },
    {
        path: '/shoppingCar',
        name: 'ShoppingCar',
        component: ShoppingCar
    },
    {
        path: '/mySet',
        name: 'MySet',
        component: MySet
    },
    {
        path: '/news',
        name: 'News',
        component: News
    },
    {
        path: '/productDetail',
        name: 'ProductDetail',
        component: ProductDetail
    }
  ],
    mode: 'history',
    linkActiveClass: "active",//配置精确匹配，将router-link-active定义为active
    scrollBehavior(to, from, savedPosition) {
      // keep-alive 返回缓存页面后记录浏览位置
　　　//scrollBehavior 滚动行为
      if (savedPosition && to.meta.keepAlive) {
        return savedPosition;
      }
      // 异步滚动操作
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve({
            x: 0,
            y: 1
          });
        }, 0);
      });
    }
})

页面路由

<template>
    <div class="bottomNav">
        <ul>
            <li>
                <router-link exact  :to="{ name: 'Index', params: {} }">
　　　　　　　　　　　<!-- exact 只要写一个就可以了 -->
　　　　　　　　　　　　<img src="../../static/images/greenhome.png" />
                </router-link>

 </li> <li> <router-link :to="{ name: 'Mall', params: {countt:'积分商城'} }"> <img src="../../static/images/grayshop.png" /> </router-link> </li> <li> <router-link :to="{ name: 'ShoppingCar', params: {newsHeader:'购物车',upLeft:true,shopicon:false} }"> <img src="../../static/images/graycar.png" /> </router-link> </li> <li> <router-link :to="{ name: 'MySet', params: {} }"> <img src="../../static/images/graymine.png" /> </router-link> </li> </ul> </div> </template>

<style scoped>

　　.acitve {

　　　　color: red

　　}

</style>

这样可以在 active 写，匹配到的样式，如果还有图片，建议将图片做成雪碧图，这样直接更改background-position 就可以了