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
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
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
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
In the routes declaration, I like to add this: [ … { path: ‘/404’, component: NotFound }, { path: ‘*’, redirect: ‘/404’ }, … ] Which will imply that if the user is navigated to a path which does not match any routes, it will be redirected to the “404” route, which will contain the … Read more
As suggested here, what you can do is to export your store from the file it is in and import it in the routes.js. It will be something like following: You have one store.js: import Vuex from ‘vuex’ //init store const store = new Vuex.Store({ state: { globalError: ”, user: { authenticated: false } }, … Read more
I’ve used it only from components but you could try following in case you’re using common boilerplate where routes are defined under router/index.js then you just import it like: import Router from ‘../router’; After it is possible to use it in code e.g. Router.push(‘/mypage’) Not sure if it works but give it a try.
There is a currentRoute property that worked for me: this.$router.currentRoute
Wrap <router-view></router-view> with <transition name=”fade”></transition> and add these styles: .fade-enter-active, .fade-leave-active { transition-property: opacity; transition-duration: .25s; } .fade-enter-active { transition-delay: .25s; } .fade-enter, .fade-leave-active { opacity: 0 } Detailed answer Assuming you have created your application with vue-cli, e.g.: vue init webpack fadetransition cd fadetransition npm install Install the router: npm i vue-router If you … Read more