Reputation: 14961
I was reading here:
https://router.vuejs.org/en/essentials/dynamic-matching.html
but it doesn't seem to let me match say:
/mycoolapp?someid=123
yes, I could do
/mycoolapp/123
but that is not the question
The question is: can I match routes dynamically with get query parameters?
Upvotes: 6
Views: 8703
Reputation: 1
vue-router uses this to handle paths can help you find a solution
there are only a few mentions of query in the documentation
When dealing with query strings, escape the question mark (?) so it doesn't mark the parameter as optional. Handling unordered data is outside the scope of this library.
const regexp = pathToRegexp("/search/:tableName\\?useIndex=true&term=amazing");
regexp.exec("/search/people?useIndex=true&term=amazing");
//=> [ '/search/people?useIndex=true&term=amazing', 'people', index: 0, input: '/search/people?useIndex=true&term=amazing', groups: undefined ]
// This library does not handle query strings in different orders
regexp.exec("/search/people?term=amazing&useIndex=true");
//=> null
but I still couldn't make a route with a query string
Upvotes: 0
Reputation: 135872
You can access the query parameters, in your example someid
via $route.query.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.
Demo below:
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>
On the other hand, if you want to redirect to a specific component depending on the query parameters, you can use navigation guards. For instance, beforeEach
:
router.beforeEach((to, from, next) => {
if (to.query.field === 'email') {
next({path: '/email'}); // some hypothetical path
} else {
next();
}
});
Upvotes: 8