I have the following scenario...
When a user visits the route /intended/page, they are redirected to another route, say /foo/page?next=/intended/page. I add a query param next=/intended/page to keep the original route. From the redirect route, the user goes through a series of other pages/components , say /bar/page then /baz/page at the end of which I want to take them to the original route. The problem is how to pass along next to bar and baz routes. I figure I could store the query param in Vuex but maybe there is a simpler way using vue router. I tried doing it in a global guard
router.beforeEach((to, from, next) => {
if (from.query.next) next({path: to.path, query: {next: from.query.next}});
else next();
});
but I end up in an infinite loop. Any ideas?
If you want to edit querystring parameters runtime, before each route, you just need to edit your to.query object:
example:
to.query.site = 'mysite';
and then:
next({path: to.path, query: to.query})
If your url was: /#/?name=Gianni
It will redirect to: /#/?name=Gianni&site=mysite
Related
Is there a way to pass multiple params into a dynamic route?
For example I have a search result page that is looping through results
{#each results as result}
<a href="../book/{result.key}">
{result.title}
</a>
{/each}
I am passing the key to a [slug] route and I am using the key to call an API.
My end goal is to have the result.title be the dynamic route param, but I also want to pass the result.key so I am able to call the API.
This post: Passing mulitple parameters to dynamic route in Svelte is over a year old and I was wondering if there is now a way to do this and I would like to keep the route as /title instead of /title/key or /key/title as suggested in that post.
You will have to embed both of them somehow in the URL. Perhaps a construction like /book/<title>?key=<key> would do for you ? I notice that would be the 'other option' from the post you linked, but the answer there is outdated.
Nowadays you would either in +page.sveltejs or +page.server.js do
export const load = (async ({ params, url }) => {
const title = params.title;
const key = url.searchParams.get('key');
}
But here you would have to be aware that key could be empty.
One last option (that I personally don't like) is to have the urls in the form of /book/<title>-<key>, this is something you sometimes see with product sites.
In this case your file will be called /book/[title]-[key]/+page.svelte
And you just extract the params as normal:
export const load = (async ({ params }) => {
const { key, title } = params;
}
In my vuejs 3 application, I'm trying to add a navigation drawer to all admin routes. So, I need to catch all routes starting with admin (this includes "/admin", "/admin/users", "/admin/users/10" etc). I tried "/admin*", not working. I've tried googling around, no solution too.
One possible approach:
In the component where you render the navigation drawer, you could extract the route path portion that you need and then check if the current route is allowed to render the navigation drawer:
So you could create a function like this:
import { useRoute } from 'vue-router';
const route = useRoute()
//We will pass a parameter to reuse the function in case you need it.
const routeIsAllowed = (requiredRoute) => {
const routePath = route.path.substring(0, requiredRoute.lenght);
return routePath === requiredRoute
}
Then in your template you just render conditionally based on the route path name matching your criteria:
<NavigationDrawer v-if="routeIsAllowed('/admin')" />
There might be a different approach but I think is a valid solution with reutilization in mind.
Also if you want to get an array of routes in a nested route configuration in Vue Router, you just need to get it like this:
full route path: /admin/users
route.matched[0].path // '/admin'
route.matched[1].path // '/users'
Basically matched will give you an array of each route path, which can be accessed with the index value and .path at the end as a string.
I'm working on a vue.js application. I'm trying to pass parameters in a redirect from one component to another like this:
this.$router.push({
path: '/my-path',
query: {
anArray: [...]
}
});
Once the component at my-path loads, I'm able to retrieve the parameters like this:
const theArray = this.$route.query.anArray;
The problem is that as soon as I refresh the page, the parameters are gone. When I open Chrome DevTools and put a break point where I retrieve the array from $route.query, I see this:
0: "[object Object]"
1: "[object Object]"
2: "[object Object]"
It seems obvious that it's getting this from the url which is:
http://localhost:8080/my-path?anArray=%5Bobject%20Object%5D&anArray=%5Bobject%20Object%5D&anArray=%5Bobject%20Object%5D
It doesn't seem to realize the 'object' terms in the url are just encodings of actual objects, which are available from $route.query the first time it loads.
Is there another way to pass parameters to a component using $router.push() such that the parameters persist on the page even after refreshing?
I could just try:
this.$router.push('/my-path?anArray=[...]');
...but my goal is to hide the parameters from the user (so don't show them in the url). This is another reason I'm looking for an alternate way of passing parameters (it doesn't even hide them).
I also tried:
this.$router.push({
path: '/my-path',
params: {
anArray: [...]
}
});
...but this made the parameters unavailable in the component (I wonder if this has anything to do with our global router which routes '/my-path' to the MyPath component without specifying parameters; is it wiping out the parameters?).
Thanks.
If you want to hide the parameters from the user, you must not use query. Instead, you should use parameters. Here I let you an example:
//routes.js
path: '/:data',
name: 'Home',
component: () => import('pages/YourPage.vue')
//Passing parameters
this.$router.push({
name: 'Home',
params: { data: yourData}
});
//Receiving parameters in Home component
created() {
console.log('Params: ', this.$route.params);
}
I hope this could be usefull
While params suggested #elC0mpa is a correct answer here are some alternatives depending on the use case:
localStorage/SessionStorage
Save the paramters into localStorage/SessionStorage and retrieve them in the loading sequence of your destination-page as #nachodd pointed out.
⚠ It should be noted that only key value pairs in form of strings are being saved into these storages.
You will need something along the line of
localStorage.setItem(itemKey,JSON.stringify(itemValue)
to set the values and
const itemValue = JSON.parse(localStorage.getItem('itemKey')
to recive it. Also localStorage.removeItem('itemKey') for cleanup.
vuex store
You may want to consider saving your data in the store all together and access it from any vue-component.
The commands needed are this.$store.commit('pathToStore/setterForKey',value) to save something into the store and this.$store.getters[pathToStore/getterForKey'] to receive the items value.
⚠ It should be noted that you need to set up the store accordingly with every state setter/mutation, getter and action. See this documentation.
currently have query param id=2&p=3
want to change this with vue-router
tried :
this.$router.push({query:{id:'2',p:'4'}});
but throws NavigationDuplicated
weird ..
how to change just the query, to trigger watch.
The error will be thrown only if your params the same, so you could just check your params before push or replace. Also, you could use async/await or then/catch with there methods, here is an example:
try {
if (/* id or p have been changed in this.$route.query */) {
await this.$router.push({query:{id:'2',p:'4'}});
}
} catch (err) {
...
}
I had the same issue of getting a "NavigationDuplicated" error on adjusting my query. In my case the problem was because on page load I was naively getting the query object directly from the router. I loaded it like:
beforeRouteEnter (to, from, next) {
store.dispatch('setQuery', to.query);
next();
}
where setQuery would set my vuex store variable query.
The issue is then that this object just points to the query inside the route object, and making changes to it changes directly route.query but the url doesn't react to this change. If you then do something like:
watch: {
query (query) {
this.$router.push({query: query})
}
}
you will get a "NavigationDuplicated" error as the new "query" will be identical to the old "query" since you are just passing the pointer to the original object.
To avoid this issue you can do some sort of deep copy (e.g. JSON.parse(JSON.stringify(to.query))) to make sure you are not directly modifying the route.query when you adjust the query.
if you create button and want to router push, just convert those button to <router-link :to="routeObject" />. Router-link will not react if destination route = current route, so it won't show error navigationDuplicate
note:
routeObject : {
path : '/search',
query : {}
}
I am using Nuxt.js with Vuex and I would like to trigger a mutation when somebody enters in my web with a certain parameter (ex: https://example.com/?param=abc), and pass the parameter to a state.
I tried to check the documentation of the watchQuery property https://nuxtjs.org/api/pages-watchquery, but there’s no examples about how to do this, I just found this How to watch on Route changes with Nuxt and asyncData but I can’t see any way of how to write an action in Vuex store with watchQuery.
I tried writing:
actions: {
watchQuery: true,
asyncData ({ query, app }) {
const { start } = query
const queryString = start ? `?start=${start}` : ''
return app.$axios.$get(`apps/${queryString}`)
.then(res => {
commit('setParam',res.data);
})
},
}
But that syntax is not allowed.
Any help would be welcome, thanks in advance!
From my understanding watchQuery sets a watcher for query string, meaning it's waiting for the query to change while the page is already rendered making it possible to call methods like asyncData() again.
Since you only want to save a certain parameter when the user enters the page and then pass the paramater to a state you just need to move your asyncData method to a page from which you want to get the parameter, you will also need to extract store and query from the context automatically passed into asyncData and then using the store and query save the query parameter into your state.
Here is a simple demonstrantion
// Your page from which you want to save the param
export default {
asyncData({store, query}) { // here we extract the store and query
store.state.somethingForSavingTheParam = query.nameOfTheParamYouWantToSave
// instead of using store.state you could use store.commit(...) if that's what you want
}
}