匹配带有查询字符串的vue js路由？

Question

我在这里阅读：

https://router.vuejs.org/en/essentials/dynamic-matching.html

但这似乎并不能让我说：

/mycoolapp?someid=123

是的，我可以

/mycoolapp/123

但这不是问题

问题是：我可以使用get查询参数动态匹配路由吗？

Answer 1

您可以访问查询参数，在你的榜样someid通过$route.query.someid。从$route文档：

• $route.query

  类型： Object

  包含查询字符串的键/值对的对象。例如，对于路径/foo?user=1，我们得到$route.query.user == 1。如果没有查询，则该值将为空对象。

下面的演示：

const UserList = {
  template: '#users',
  data() { return { users: [] } },
  created() {
    axios.get('https://jsonplaceholder.typicode.com/users').then(r => this.users = r.data);
  }
};
const User = {
  props: ['uid', 'user'],
  template: '#user'
}

var router = new VueRouter({
  routes: [{
    path: '/',
    component: UserList
  },
  {
    path: '/user/:uid',
    component: User,
    name: 'user',
    props: true
  }]
});

var app = new Vue({
  el: '#app',
  router: router,
  template: '<router-view></router-view>'
});

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-router"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<template id="users" functional>
  <div>
    <ul>
      <li v-for="user in users">
        <div>
          {{ user.name }} - 
          <router-link :to="{name: 'user', params: {uid: user.id, user: user}, query: {field: 'email'}}">(email)</router-link> -
          <router-link :to="{name: 'user', params: {uid: user.id, user: user}, query: {field: 'website'}}">(website)</router-link>
        </div>
      </li>
    </ul>
  </div>
</template>

<template id="user" functional>
  <div class="row">
    <b>{{ user.name }}</b><br>
    {{ $route.query.field }}: {{ user[$route.query.field] }}<br>
    <router-link :to="{path: '/'}">back</router-link>
  </div>
</template>

<div id="app">
  <p>{{ message }}</p>
</div>

另一方面，如果要根据查询参数重定向到特定组件，则可以使用导航保护。例如beforeEach：

router.beforeEach((to, from, next) => {
    if (to.query.field === 'email') {
        next({path: '/email'}); // some hypothetical path
    } else {
        next();
    }
});