> 웹 프론트엔드 > JS 튜토리얼 > vue2.0을 사용하여 네비게이션 가드를 구현하는 방법

vue2.0을 사용하여 네비게이션 가드를 구현하는 방법

php中世界最好的语言
풀어 주다: 2018-05-28 14:37:39
원래의
1786명이 탐색했습니다.

이번에는 vue2.0을 사용하여 네비게이션 가드를 구현하는 방법과 vue2.0을 사용하여 네비게이션 가드를 구현할 때 주의 사항이 무엇인지 보여드리겠습니다.

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

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

Global Guard

router.beforeEach를 사용하여 글로벌 사전 등록을 할 수 있습니다. Guard :

const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
 // ...
})
로그인 후 복사

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

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

to: 경로: 진입하려는 대상 경로object

from: 경로: 현재 탐색이 떠나려는 경로

next: 기능: 호출해야 합니다. 이 메서드는 이 후크를 해결합니다. 실행 효과는 다음 메서드의 호출 매개변수에 따라 달라집니다.

next(): 파이프라인의 다음 후크로 진행합니다. 모든 Hooks가 실행되면 내비게이션의 상태가 확인됩니다.

next(false): 현재 탐색을 중단합니다. 브라우저의 URL이 변경되면(아마도 사용자가 수동으로 또는 브라우저의 뒤로 버튼 을 통해) URL 주소는 from 경로에 해당하는 주소로 재설정됩니다.

next('/') 또는 next({ path: '/' }): 다른 주소로 이동합니다. 현재 탐색이 중단되고 새 탐색이 시작됩니다.

next(error): (2.4.0+) next에 전달된 매개변수가 Error 인스턴스인 경우 탐색이 종료되고 오류는 router.onError()에 의해 등록된 콜백으로 전달됩니다.

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

아래 예를 작성하세요.

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

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

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 중국어 웹사이트의 다른 관련 기사도 주목해 보세요!

추천 자료:

jQuery를 사용하여 임의의 색상을 얻는 방법

JS를 통해 가장 간단한 검색, 정렬 및 중복 제거 알고리즘을 구현하는 방법

위 내용은 vue2.0을 사용하여 네비게이션 가드를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿