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”>
You can do it by returning a promise from vuex action, as it is explained here and call the dispatch from within the beforeEnter itself. Code should look like following: import store from ‘./vuex/store’; // following is an excerpt of the routes object: { path: ‘/example’, component: Example, beforeEnter: (to, from, next) => { store.dispatch(‘initApp’).then(response … Read more
Thanks to Sandeep Rajoria we found solution, need to use this.$route except $route inside a component
You can use navigation guards to activate/deactivate a loading state that shows/hides a loading component: If you would like to use something like “nprogress” you can do it like this: http://jsfiddle.net/xgrjzsup/2669/ const router = new VueRouter({ routes }) router.beforeEach((to, from, next) => { NProgress.start() next() }) router.afterEach(() => { NProgress.done() }) Alternatively, if you want … Read more
Try the following code snippet <v-btn icon href=”https://stackoverflow.com/fooRoute” target=”_blank”> <v-icon>window</v-icon> Link Text </v-btn> Vuetify Button API
Add the router-link stub to the shallow (or shallowMount) method options like this: const wrapper = shallow(TempComponent, { propsData: { temp }, stubs: [‘router-link’] }) or this way: import { RouterLinkStub } from ‘@vue/test-utils’; const wrapper = shallow(TempComponent, { propsData: { temp }, stubs: { RouterLink: RouterLinkStub } }) The error should go away after … Read more