​

Route independent guard, as the name implies, is the routing of their own security tasks, just like our LOL, we guard is an independent road, to ensure that our road will not be attacked by the enemy (of course, we also have to fight with regiments).

The official definition says that you can directly define beforeEnter guards in the routing configuration, which have the same method parameters as the global front guards.

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

The parameters are as follows:

beforeEnter(to,from,next)
//  to's entry target, routing object
//  from the current navigation is about to leave the route
//  next is initially considered to be a display page; (whether or not to display jump pages)
​
next()//Direct access to the route indicated
next(false) //Interrupt current routing
next('route') //Jump Designated Routing
next('error') //Jump Error Routing

Here we use a case to illustrate its usage. In the case, independent routing detects whether the login is in the login state independently and pops up to the login interface without login, which is consistent with the global login effect, but only keeps itself.

import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
​
import Index from './Index/Index.vue'
​
import AA from './views/AA.vue'
import DD from './views/DD.vue'
import EE from './views/EE.vue'
export default {
    routes: [
        {
            path: '/',
            component: Index,
            name: 'index',
            children: [
                {
                    path: 'AA',
                    component: AA,
                    name: 'aa',
                    beforeEnter: (to, from, next) => {
                        if (to.path == '/DD') {
                            next()
                        } else {
                            alert('Please log in.');
                            next('/DD')
                        }
​
                    }
                }, {
                    path: 'DD',
                    component: DD,
                    name: 'dd'
                },
                {
                    path: 'EE',
                    component: EE,
                    name: 'ee'
                },
​
            ]
        }
    ]
}
​
​

Attach the source address https://gitee.com/web94/vueluyouduxiangshouwei

If you feel good, please point your finger and pay attention to our public number. We will share the front-end knowledge for you for a long time.