vue.js - 如何设置具有查询参数的事件路由的样式？

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. 在这种情况下应该如何设置事件链接的样式？

附言

这是一个说明问题的 fiddle :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