01 Introduction to global front guard

Register a global front-guard with router.beforeeach:

const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
  // ...
})
Copy the code

When a navigation is triggered, the global front-guard is called in the order it was created. The guard resolves asynchronously, in which case the navigation waits until all the guards resolve. Each guard method takes three arguments:

To: Route: indicates the destination Route to be entered

**from: **Route: the current navigation is about to leave the Route

**next: **Function: Be sure to call this method to resolve the hook. The execution depends on the call parameters of the next method

02 Next Method parsing

Next (): does not trigger beforeEach

Next (‘/ XXX ‘) or next({path: ‘/ XXX ‘}) jumping to different addresses executes router.beforeeach hook function again.

03 Error caused by next

Vue global front-guard causes an infinite loop
router.beforeEach((to,from,next) =>{ if (sessionStorage.getItem("token")) { if(to.path === "/login"){ Next ({path:"/dashboard"})}else{alert("1") next()}}else{next({path:"/ login"})})Copy the code

Solution:

router.beforeEach((to, from, next) => { let token = window.sessionStorage.getItem('token'); if (to.path ! = '/login' && ! token) { next({ path: '/login' }) } else { if (to.path == '/login' && token) { next('/dashboard') } else { next() } } })Copy the code
Vue -router dynamic route loading, can be implemented, but the refresh page is not displayed
if (to.name === 'Login') { next(); } else {if(to.meta.requireauth) {// Verify user login if(sessionStorage.getitem ('isLogin')) {if(store.getters.getislogin && Store.getters. GetRefresh){// If the user is logged in and the page refresh value is true, add the route store.dispatch('setNoRefresh'); // Refresh to false DynamicAddRouter(); Next ()}else{next(); } } else { next({ path: '/login'})}} else {if(store.getters. GetRefresh){console.log(" load dynamic route ") Add route store.dispatch('setNoRefresh'); // Refresh to false DynamicAddRouter(); Next ()}else{next(); }}Copy the code

Solution:

After loading the route dynamically, change the next() method to next({… to, replace: true })

** Note: ** only changes the next method after the dynamic route is loaded. If all changes are made, an infinite loop will be entered

if (to.name === 'Login') { next(); } else {if(to.meta.requireauth) {// Verify user login if(sessionStorage.getitem ('isLogin')) {if(store.getters.getislogin && Store.getters. GetRefresh){// If the user is logged in and the page refresh value is true, add the route store.dispatch('setNoRefresh'); // Refresh to false DynamicAddRouter(); // Next ({... to, replace: true }) }else{ next(); } } else { console.log(sessionStorage.getItem('isLogin')) next({ path: '/login'})}} else {if(store.getters. GetRefresh){console.log(" load dynamic route ") Add route store.dispatch('setNoRefresh'); // Refresh to false DynamicAddRouter(); // Next ({... to, replace: true }) }else{ next(); }}Copy the code

** Resolution: The **replace attribute is true to allow links to jump without leaving a history.

Like this article, you can support it, share, like, watch one, haha @_@

For more articles, please pay attention to the official number