vue2.0 implements navigation guard (routing guard)

This article mainly introduces the relevant knowledge of vue2.0 to implement navigation guards (route guards). The beforeRouteUpdate provided by vue-route can easily implement navigation guards (navigation-guards). Friends in need can refer to it

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

In this regard, 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:

to: Route: the target routing object to be entered

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

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

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

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

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

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 the callback registered by router.onError().

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

Write an example below:

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

When directly entering the login page LoginPage, if "logged in status", jump to the home page 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;

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How to solve the problem of error reporting in syntax rule detection of vue

About the use of jsx syntax of vue components Introduction

Introduction to the Vue-based lazy loading plug-in vue-view-lazy

The above is the detailed content of vue2.0 implements navigation guard (routing guard). For more information, please follow other related articles on the PHP Chinese website!