I have the following app structure:
-app
-route1
-route2
-child1
-child2
I would like to navigate to route2/child1 from route1. Using this.router.navigateToRoute(name of child route) results in an error: A route with name 'ranking' could not be found.
Any suggestions?
This is a known no-workaround issue, due to the nature of lazy loading. As you cannot know what route will be available in route2 until you have loaded it successfully. Typically we can use .navigate with parameter for this.
Related
I'm building a back office using Quasar. I would like to be able to open routes in what I would call a sidepage (for the lack of a better better word... maybe you have one?).
Opening a route in this sidepage would render the component requested without decoration (like menus).
This route could potentially however be opened directly in a new window (not in a sidepage) with decoration.
From this sidepage, I would like to be able to open another sidepage, and so on.
This is basically what I'd like to do (https://tagmanager.google.com/) :
I've literally no clue how to do that. I'm trying to build a component that would take a route, create a sidepage, size it correctly (as you can see the second sidepage is smaller than the first one) )and open the route in it but I fail to do so.
Any clue where to start or any idea on a component that would do that already ? I haven't found anything yet.
You could search for your component using the path in the router options.
const route = this.$router.options.routes.find(
(route) => !!route?.path?.includes("route/to/display")
)
this.component = route?.component;
And then display it using component tag.
<component :is="component" />
I have a problem with the redundant of routes on vuejs.
I have a Vuejs page with Query that I would like to be able to change continuously but when I make the change (this.$router.replace({query: newQuery})), It show me this Error :
**Uncaught (in promise) Error: Avoided redundant navigation to current location:**
Error Screenshot
This is happening because you are trying to replace the current route with the same route you're actually in.
You should avoid the renavigation to the current location, but if you decide to not avoid it then you need to catch the promise so the browser things the exception is being handled:
Any router action is a promise, you just need to catch it:
this.$router.replace({query: newQuery}).catch(()=>{});
Vue Router documentation on navigation failures
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.
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.
I'm new to express and often see the code like this:
app.once('mount',function onmount(parent){
parent._router.stack.pop();
});
Not sure what is _router and why they pop it? Any reasons behind it?
The mount event occurs when a sub-app is registered with a parent app. The parent argument is the parent app object.
parent._router is the router associated with that parent app object.
parent._router.stack is the array of routes registered with that route.
parent._router.stack.pop() is removing the last registered route from that router.
There isn't enough context here for us to know why that last route is being removed. It's possible they are trying to remove the 404 error route (just a guess).
FYI, this direct manipulation of private instance variables is not documented behavior.