v-link добавить ссылкуActiveClass, как сопоставить routerName или (путь и запрос)?

Question

У меня есть два v-ссылку, как это:

'/accountList?accountType=1': { 
     name: 'accountList1', 
     component: require('./../views/finance/accountList.vue') 
    }, 
    '/accountList?accountType=2': { 
     name: 'accountList2', 
     component: require('./../views/finance/accountList.vue') 
    }, 

<li><a v-link=" { name: 'accountList1', exact: true } "><span>test1</span></a></li> 
<li><a v-link=" { name: 'accountList2', exact: true } "><span>test2</span></a></li> 

, когда я нажимаю один или их, как добавляются linkActiveClass.

Теперь моя проблема: как контроллер активного состояния по routerName или пути И запрос?

Ps: exact: true, это неправильный пример, он не подходит здесь.

Answer 1

В этом случае я вижу два решения

1. вместе с routerName вам также необходимо сравнить query Params, которые могут быть доступны: this.$route.query. accountType
2. Вы можете сравнить $route.fullPath, который включает в себя URL, включая запрос и хэш.

Но я не уверен, почему у вас эти два маршрута разные: в идеале они должны быть идеально одинакового маршрута с различным запросом Param. Также посмотрите на это answer.

Answer 2

Per документы: https://router.vuejs.org/en/api/router-link.html

Я хотел бы предложить использовать:

<!-- with query, resulting in /register?plan=private --> 
    <router-link :to="{ path: 'accountType', query: { accountType: '1' }}"></router-link> 
<router-link :to="{ path: 'accountType', query: { accountType: '2' }}"></router-link>