How do I make router understand /{id}/{dateid} and something like /admin/events as two different routes? Right now it tries to load page corresponding to the first route when I try to navigate through some other routes
As stated in vue-router docs the order of the declaration matters.
the earlier a route is defined, the higher priority it gets
So making /admin/events to be before /{id}/{dateid} would solve the issue.
Related
I have a Nuxt page and i want to change route path without re-rendering or refreshing page with a method on a button.
if i do this.$router.push() or replace(), page will refresh and if i do window.history.pushState() or replaceState() that works fine but after that if i add a query with this.$router.push({ query: a = b }) on my page, page will refresh because changing route with window.history will not change $route and when i use this.$router.push, Vue Router thinks its a different page.
I've done a lot of search on internet and did not find anything, so please don't label this question as duplicate.
What you're actually looking for is a Default Layout and some nested routes. Here is an example on how to achieve this in Nuxt with just a few steps: https://nuxtjs.org/examples/routing-nested-pages
Finally i solved this problem with using parent page and nuxt childs, i changed tabs to nav and rendered base components on parent page and other things on child pages and now it works fine. Tnx to #kissu and #Braks.
I'm using the typical Vue Router configuration as shown in their guide. What i want is to show the name of the shown route, outside of the router-view. So i would need to ask the router which route is active.
I've found in the router API that it has a currentRoute property, which i was hoping would give me the active route, and i would read its name, and then i'm fine from there.
To test this, i imported the router like so:
import router from '#/router.js';
Then tried to read the name of the active route:
data: function(){
return {
test: router.currentRoute.name
}
}
And displaying it with {{ test }}.
It seems like it's sort of doing what i wanted it to, but it's super inconsistent and unreliable. I don't get any errors anywhere, and the route name does not show up, and seemingly does not work. But then (sometimes) if i change something in my component's template, like delete an element, or add an element, and Vue hot-reloads my app, the route name appears and continues working. From there, if i refresh, it won't appear again.
What am i doing wrong, and what is the correct way of reading the active route name?
Subquestion
Would it be a good idea to use router.beforeEach for this? Because that seems to work correctly, but it seems like a wrong approach for this...
A route object represents the state of the current active route. It
contains parsed information of the current URL and the route records
matched by the URL.
Reference.
You can access current route object through this.$route;.
Using vue-router 3.0.6
I have several landing pages, whose URLs are loaded on page load via an API.
I wait to render <router-view /> until this API call has resolved.
When it has resolved I run this.$router.addRoutes(routes)
However once router-view is render, I get a 404 route rendered.
If I navigate to the homepage and click a link to the dynamic landing page I was originally trying to access on load it works fine.
Is there some function to get vue-router to re-evaluate it's available routes, something that might be happening during the route change to the homepage that allows the next navigation to the dynamic page work?
First load -> /dynamic-route = 404
First load -> /dynamic-route -> 404 -> homepage -> /dynamic-route = OK
Old question but if anyone is stuck on this, you need to perform the operation that sets the routes before calling Vue.use(router) in Vue 2 or app.use(router) in Vue 3.
This is because installing the router plugin immediately triggers an operation to match the initial path. Since the route you wish it to detect is not registered at that time, it gets missed.
It does not matter if you show/hide the router-view component based on a flag variable since the path matching operation has already been completed by then.
when you match /dynamic-route directely, maybe the addRoutes did not work. so it would math 404.
you can make the function of addRoutes work using the function of beforeEach when you change your route.
I am using Aurelia for my project,Now I have problem in navigating to previous page.I want to know are there any ways to get that previous router information from Aurelia router object.
this.router.navigateToRoute('test', {});
I read some github issue related to this, but I couldn't find solution.
furthermore are there any way to got that previous router state from below mention code.This code I got from github
router.currentInstruction
adding my comment as an answer so you can vote it and close.
you can use the navigateBack function from the router instance..
If the destination is the same as the current route and only params are changing
going from one profile to another /users/1 -> /users/2.
How can I recognize this and update the component?
I'm not sure its the same for next.js but in due router even if the parameter changes the same component is reused. So you need to specifically watch the param changes.
From Vue router Documentation:
One thing to note when using routes with params is that when the user navigates from /user/foo to /user/bar, the same component instance will be reused. Since both routes render the same component, this is more efficient than destroying the old instance and then creating a new one. However, this also means that the lifecycle hooks of the component will not be called.
Take a look here: https://router.vuejs.org/en/essentials/dynamic-matching.html#reacting-to-params-changes