.router-link-exact-active
当通过 this.$router.push(...)
导航到该路线时,类未添加到事件路线.
例如:
// ...
this.$router.push('/?foo=bar');
不会导致 <router-link :to="'/'">Home</router-link>
被分配 .router-link-exact-active
类。
- 这是错误还是预期的行为?
- 在这种情况下应该如何设置事件链接的样式?
附言
这是一个说明问题的 fiddle :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>
关于vue.js - 如何设置具有查询参数的事件路由的样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49792077/