Question

通过.router-link-exact-active导航到该路线时，

this.$router.push(...)课程未添加到有效路线。

例如：

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

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

这是一个错误，还是一个预期的行为？
在这种情况下，如何设置活动链接的样式？

P.S

这是一个说明问题的小提琴：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

＆＃13;

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

＆＃13;

In your Fiddle

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

1 个答案: