如何设置具有查询参数的活动路由？

Question

.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/

Answer 1

可能你应该单独使用params 或query 并使用query 或params 值作为模板数据，如下例所示

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

Check in docs

<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>

In your Fiddle