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

Question

当通过 this.$router.push(...).

导航到该路线时，

.router-link-exact-active class 未添加到活动路线

例如：

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

不会导致 <router-link :to="'/'">Home</router-link> 被分配 .router-link-exact-active class。

这是错误还是预期的行为？
在这种情况下应该如何设置活动 link 的样式？

P.S

这是一个 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

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

How do I style an active route that has query params?

vue.js

vue-router

vuejs2