Since you want to pass params to the component of the respective route you route object’s path property should have a dynamic segment denoted by : followed by the name of the key in your params object so your routes should be routes: [ {path: ‘/newLocation/:foo’, name: ‘newLocation’, component: newComponent} ] Then for programmatically navigating … Read more
Little late but I will try to answer the question. This is more an architectural question than just routing level question. TLDR: You will need a mix of approaches. One approach won’t fit. 1. Routing Mode First, you should determine if you are going with HTML 5 history mode or hash mode It is 2018, … Read more
You can use an alias in the routes: routes: [ { path: ‘/foo’, component: Foo, alias: ‘/bar’} ] There are some nice examples here: https://github.com/vuejs/vue-router/blob/dev/examples/route-alias/app.js
You can specify the route you want to keep alive , like: <keep-alive include=”home”> <router-view/> </keep-alive> In this case, only home route will be kept alive
If anyone using Vuetify comes across this question, note that the styling below do not work due to Vuetify’s in built styles. You must instead use inline CSS styling: <router-link style=”text-decoration: none; color: inherit;” to=”/hello”>
You have to handle casting any params values yourself. In the route object define a props function. Here is an example: { path: ‘/user/:userId’, component: UserProfile, props: (route) => { /** * This would preserve the other route.params object properties overriding only * `userId` in case it exists with its integer equivalent, or otherwise with … Read more
See Special Attributes – key It can also be used to force replacement of an element/component instead of reusing it. This can be useful when you want to: Properly trigger lifecycle hooks of a component Trigger transitions $route.fullPath is defined as The full resolved URL including query and hash. If you bind key to $route.fullPath, … Read more
I disagree with the top answer – you can mock $route without any issue. On the other hand, installing vue-router multiple times on the base constructor will cause you problems. It adds $route and $router as read only properties. Which makes it impossible to overwrite them in future tests. There are two ways to achieve … Read more
v-list-tile, v-btn, and v-card all extend router-link, so you can use any of the router-link attributes directly on those components instead. In your case you can just use <v-list-tile :to=”item.link”>