Detailed explanation of how to use routing guards in vue2.0

This time I will bring you a detailed explanation of how to use routing guards in vue2.0. What are the precautions for using routing guards in vue2.0. Here are actual cases, let’s take a look.

Doing some verification before routing jumps, such as login verification, is a common requirement in websites.

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

The name navigation-guards sounds weird, but since the official document translates it this way, let’s call it that.

Paste the document address: https://router.vuejs.org/zh-cn/advanced/navigation-guards.html

Global guard

You can use router.beforeEach to register a global beforeEach guard:

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

When a navigation is triggered, the global beforeEach guard is called in the order of creation. Guards are parsed and executed asynchronously. At this time, the navigation is waiting until all guards are resolved.

Each guard method receives three parameters:

1. to: Route: The target routing object to be entered

2. from: Route: The route that the current navigation is about to leave

3. next: Function: This method must be called to resolve this hook. The execution effect depends on the calling parameters of the next method.

1. next(): Proceed to the next hook in the pipeline. If all hooks are executed, the status of the navigation is confirmed.

2. next(false): Interrupt current navigation. If the browser's URL changes (perhaps manually by the user or by the browser's backbutton), the URL address will be reset to the address corresponding to the from route.

3. next('/') or next({ path: '/' }): Jump to a different address. The current navigation is interrupted and a new navigation is started.

4. next(error): (2.4.0) If the parameter passed to next is an Error instance, the navigation will be terminated and the error will be passed to router.onError() Registered callback.

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

Write an example below:

1. List the "route collections" that need to determine the login status. When jumping to the routes in the collection, if "Not logged in Status", then jump to the login page LoginPage;

2. When entering the login page LoginPage directly, if "Logged in status", 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';
Vue.use(Router)
const router = new Router({
 routes: [
  {
   path: '/', // 默认进入路由
   redirect: '/home'  //重定向
  },
  {
   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: '**',  // 错误路由
   redirect: '/home'  //重定向
  },
 ]
});
// 全局路由守卫
router.beforeEach((to, from, next) => {
 console.log('navigation-guards');
 // to: Route: 即将要进入的目标 路由对象
 // from: Route: 当前导航正要离开的路由
 // next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
 const nextRoute = ['home', 'good-list', 'good-detail', 'cart', 'profile'];
 let isLogin = global.isLogin; // 是否登录
 // 未登录状态；当路由到nextRoute指定页时，跳转至login
 if (nextRoute.indexOf(to.name) >= 0) { 
  if (!isLogin) {
   console.log('what fuck');
   router.push({ name: 'login' })
  }
 }
 // 已登录状态；当路由到login时，跳转至home 
 if (to.name === 'login') {
  if (isLogin) {
   router.push({ name: 'home' });
  }
 }
 next();
});
export default router;

Believe it or not After reading the case in this article, you have mastered the method. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

How to use string templates in Vue

How to deal with Mac installation thrift error due to bison

The above is the detailed content of Detailed explanation of how to use routing guards in vue2.0. For more information, please follow other related articles on the PHP Chinese website!