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 就可以了