이번에는 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;
JS를 통해 가장 간단한 검색, 정렬 및 중복 제거 알고리즘을 구현하는 방법
위 내용은 vue2.0을 사용하여 네비게이션 가드를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!