How to use vue2.0 to implement navigation guard

This time I will show you how to use vue2.0 to implement navigation guards, and what are the precautions for using vue2.0 to implement navigation guards. The following is a practical case, let's take a look.

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 route to be entered

Object

from: Route: The route that the current navigation 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

status of the navigation 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", then 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;

I believe you have read 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 jQuery to obtain random colors

JS realizes the simplest search, sorting, and removal Re-algorithm

The above is the detailed content of How to use vue2.0 to implement navigation guard. For more information, please follow other related articles on the PHP Chinese website!