vue2.0 implements specific usage of navigation guards (routing guards)

Doing some verification before routing, such as login verification, is a common requirement in the website.

In this regard, the beforeRouteUpdate provided by vue-route can conveniently implement navigation-guards.

The name navigation-guards sounds weird, but since the official documentation is translated like this, let's call it that way.

Posted with document address:/zh-cn/advanced/

Global Guard

You can register a global front guard using:

const router = new VueRouter({ ... })

((to, from, next) => {
 // ...
})

When a navigation is triggered, the global pre-guard is called in the order of creation. The guard is asynchronously parsing and execution, and the navigation is waiting until all guards resolve.

Each guard method receives three parameters:

to: Route: The target to be entered Routing object
from: Route: The route that the current navigation is about to leave
next: Function: Be sure to call this method to resolve the hook. The execution effect depends on the calling parameters of the next method.
1. next(): performs the next hook in the pipeline. If all hooks are executed, the navigation status is confirmed.
2. next(false): interrupts the current navigation. If the browser's URL has changed (maybe it's manual or the browser's back button), the URL address will be reset to the address corresponding to the route from.
3. next('/') or next({ path: '/' }): Jump to a different address. The current navigation is interrupted and a new navigation is performed.
4. next(error): (2.4.0+) If the parameter passed in next is an Error instance, the navigation will be terminated and the error will be passed to the registered callback of () .

Make sure to call the next method, otherwise the hook will not be resolved.

Let's write an example below:

1. List the "routing collection" that needs to determine the login status. When jumping to the route in the collection, if "not logged in", jump to the login page LoginPage;

2. When you directly enter the login page LoginPage, if you are "Logined" then jump to the homepage HomePage;

import Vue from 'vue';
import Router from 'vue-router';
import LoginPage from '@/pages/login';
import HomePage from '@/pages/home';
import GoodsListPage from '@/pages/good-list';
import GoodsDetailPage from '@/pages/good-detail';
import CartPage from '@/pages/cart';
import ProfilePage from '@/pages/profile';
(Router)
const router = new Router({
 routes: [
  {
   path: '/', // Enter the route by default   redirect: '/home'  //Redirect  },
  {
   path: '/login',
   name: 'login',
   component: LoginPage
  },
  {
   path: '/home',
   name: 'home',
   component: HomePage
  },
  {
   path: '/good-list',
   name: 'good-list',
   component: GoodsListPage
  },
  {
   path: '/good-detail',
   name: 'good-detail',
   component: GoodsDetailPage
  },
  {
   path: '/cart',
   name: 'cart',
   component: CartPage
  },
  {
   path: '/profile',
   name: 'profile',
   component: ProfilePage
  },
  {
   path: '**',  // Error routing   redirect: '/home'  //Redirect  },
 ]
});

// Global route guard((to, from, next) =&gt; {
 ('navigation-guards');
 // to: Route: The target to be entered. The route object // from: Route: The route that the current navigation is about to leave // next: Function: Be sure to call this method to resolve the hook.  The execution effect depends on the calling parameters of the next method.
 const nextRoute = ['home', 'good-list', 'good-detail', 'cart', 'profile'];
 let isLogin = ; // Whether to log in // Not logged in; when routed to nextRoute specified page, jump to login if (() &gt;= 0) { 
  if (!isLogin) {
   ('what fuck');
   ({ name: 'login' })
  }
 }
 // Logged in; when routed to login, jump to home if ( === 'login') {
  if (isLogin) {
   ({ name: 'home' });
  }
 }
 next();
});

export default router;

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.