vue.js - 将 vue js 路由与其中的查询字符串匹配？

Question

我在这里阅读:

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

但是好像不让我匹配说:

/mycoolapp?someid=123

是的，我可以做

/mycoolapp/123

但这不是问题

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

Answer 1

您可以通过 $route.query.someid 访问查询参数，在您的示例 someid 中。 From $route docs :

• $route.query

  type: Object

  An object that contains key/value pairs of the query string. For example, for a path /foo?user=1, we get $route.query.user == 1. If there is no query the value will be an empty object.

下面的演示:

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>

另一方面，如果你想根据查询参数重定向到特定的组件，你可以使用navigation guards。 .例如，beforeEach:

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