집 >웹 프론트엔드 >JS 튜토리얼 >vue2.0에서 라우팅 가드를 사용하는 방법에 대한 자세한 설명

vue2.0에서 라우팅 가드를 사용하는 방법에 대한 자세한 설명

php中世界最好的语言원래의: 2018-05-29 10:25:034599검색

이번에는 vue2.0에서 루트 가드를 사용하는 방법에 대해 자세히 설명하겠습니다. vue2.0에서 루트 가드를 사용할 때 주의 사항은 무엇입니까?

라우팅 전에 로그인 확인과 같은 몇 가지 확인을 수행하는 것은 웹사이트에서 일반적인 요구 사항입니다.

이런 점에서 vue-route에서 제공하는 beforeRouteUpdate를 이용하면 navigationguard(navigation-guards)를 쉽게 구현할 수 있습니다.

navigation-guards라는 이름이 이상하게 들리는데, 공식 문서에서는 이렇게 번역하고 있으니 그렇게 부르겠습니다.

문서 주소 붙여넣기: https://router.vuejs.org/zh-cn/advanced/navigation-guards.html

Global Guard

router.beforeEach를 사용하여 글로벌 등록을 할 수 있습니다. 가드 배치 가드:

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

내비게이션이 트리거되면 전역 프런트엔드 가드가 생성된 순서대로 호출됩니다. Guard는 비동기적으로 구문 분석되고 실행되며 모든 Guard가 해결될 때까지 탐색이 대기됩니다.

각 가드 메소드는 세 가지 매개변수를 받습니다:

to: Route: 진입하려는 대상 경로 객체
from: Route: 현재 탐색이 곧 떠나려는 경로
next: 기능: 특정 이 후크를 해결하려면 이 메서드를 호출해야 합니다. 실행 효과는 다음 메서드의 호출 매개변수에 따라 달라집니다.

next(): 파이프라인의 다음 후크로 진행합니다. 모든 Hooks가 실행되면 내비게이션의 상태가 확인됩니다.
next(false): 현재 탐색을 중단합니다. 브라우저의 URL이 변경되면(아마도 사용자가 수동으로 또는 브라우저의 뒤로 버튼 을 통해) URL 주소는 from 경로에 해당하는 주소로 재설정됩니다.
next('/') 또는 next({ path: '/' }): 다른 주소로 이동합니다. 현재 탐색이 중단되고 새 탐색이 시작됩니다.
next(error): (2.4.0+) next에 전달된 매개변수가 Error 인스턴스인 경우 탐색이 종료되고 오류는 router.onError()에 의해 등록된 콜백으로 전달됩니다.

다음 메서드를 호출해야 합니다. 그렇지 않으면 후크가 해결되지 않습니다.

아래 예를 작성하세요.

1. 로그인 상태를 결정해야 하는 "라우팅 컬렉션"을 나열합니다. 컬렉션의 경로로 이동할 때 "로그인되지 않은 상태"인 경우 로그인 페이지로 이동합니다.

2. 로그인 페이지에 직접 들어갈 때 "로그인"되면 홈 페이지로 이동합니다.

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;

자세한 내용은 이 글을 읽고 익히셨을 것입니다. 흥미로운 정보가 있으니 PHP 중국어 웹사이트의 다른 관련 기사도 주목해 주세요!