쿼리 파라미터가 있는 액티브루트를 스타일링하려면 어떻게 해야 하나요?

쿼리 파라미터가 있는 액티브루트를 스타일링하려면 어떻게 해야 하나요?

.router-link-exact-active를 경유하여 해당 루트로 이동할 때 클래스가 활성화루트에 추가되지 않습니다this.$router.push(...).

예를 들어 다음과 같습니다.

// ...
this.$router.push('/?foo=bar');

결과를 초래하지 않음<router-link :to="'/'">Home</router-link>할당됨.router-link-exact-active학급.

1. 이것은 버그입니까, 아니면 의도된 행동입니까?
2. 이 경우 액티브링크를 어떻게 스타일링해야 합니까?

추신

이것은 이 문제를 나타내는 바이올린입니다.https://jsfiddle.net/alexlomm/dumeejyy/7/

사용하시는 게 좋을 수도 있다params또는query따로따로 사용하다query또는params템플릿 데이터로서의 값, 아래 예시와 같이

<router-link :to="{ path: '/', query: url_query }">home</router-link>

문서 체크인

<script type="text/javascript" src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
<script type="text/javascript" src="https://unpkg.com/vue-router@2.7.0/dist/vue-router.js"></script>
<div id="app"></div>


<script type="text/javascript">
	Vue.use(VueRouter)

const Home = {template: ''}

const router = new VueRouter({
  mode: 'history',
  routes: [
    {path: '/', name: 'home', component: Home},
  ]
})

new Vue({
  router,
  template: `
    <div id="app">
      <p>Current path: {{ $route.fullPath }}</p>
      <ul>
        <li><router-link :to="{ path: '/', query: url_query }">home</router-link></li>
      </ul>
    </div>
  `,
  data:{
  	url_query:{}
  },
  mounted() {
  	this.url_query = { foo: 'bar' };
  }
}).$mount('#app')

</script>

바이올린을 켜다

언급URL : https://stackoverflow.com/questions/49792077/how-do-i-style-an-active-route-that-has-query-params