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

标签 vue.js vuejs2 vue-router

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

最佳答案

也许你应该单独使用 paramsquery 并使用 queryparams 值作为模板数据,如下面的例子

<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

关于vue.js - 如何设置具有查询参数的事件路由的样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49792077/

相关文章:

typescript - Vue 和 TypeScript 需要 prop

javascript - 每当路由更改时如何提交突变以存储

javascript - 如何在 vue 组件命名空间中定义可重用函数

javascript - 为什么这个 Vue 3 表单验证脚本失败?

vue.js - Vue Routes 在生产中无法正常工作

vue.js - VueJS : router. 解决问题

laravel - 使用 router-view 和 Vue 传递 prop

javascript - 当使用 Vue 隐藏或显示元素时,MDL 样式会丢失

javascript - Vue Draggable - 如何只替换选择的项目以防止移动网格上的所有其他项目?

javascript - 如何从使用 Adonis Controller 的路由在 Vue 组件中发出 axios 请求