сопоставить 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();
    }
});