이번에는 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 경로에 해당하는 주소로 재설정됩니다.
아래 예를 작성하세요.
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 중국어 웹사이트의 다른 관련 기사도 주목해 주세요! 추천 도서:
bison으로 인한 Mac 설치 중고품 오류 처리 방법
위 내용은 vue2.0에서 라우팅 가드를 사용하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!