vue2.0은 네비게이션 가드(라우팅 가드)를 구현합니다.

이 글에서는 네비게이션 가드(루트 가드)를 구현하기 위한 vue2.0 관련 지식을 주로 소개합니다. vue-route에서 제공하는 beforeRouteUpdate를 사용하면 네비게이션 가드(navigation-guards)를 쉽게 구현할 수 있습니다.

루트 점프 로그인 확인과 같은 일부 확인을 사전에 수행하는 것은 웹사이트에서 일반적인 요구 사항입니다.

이런 점에서 vue-route에서 제공하는 beforeRouteUpdate를 이용하면 네비게이션 가드(Navigation-guards)를 쉽게 구현할 수 있습니다.

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

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

글로벌 가드

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

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

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

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

to: Route: 진입하려는 대상 경로 객체

from: Route: 현재 네비게이션이 떠나려고 하는 경로

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

next(): 파이프라인의 다음 후크로 진행합니다. 모든 Hook이 실행되면 탐색 상태가 확인됩니다.

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;

위 내용이 이 글의 전체 내용입니다. 여러분의 학습에 더 많은 관련 내용을 주목해주세요!

관련 권장 사항:

Vue 구문 규칙 감지 오류 문제를 해결하는 방법

vue 구성 요소 jsx 구문 사용 소개

Vue 기반 지연 로딩 플러그인 vue 소개- 보기-게으른

위 내용은 vue2.0은 네비게이션 가드(라우팅 가드)를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!