So implementieren Sie Navigation Guard mit vue2.0

Dieses Mal zeige ich Ihnen, wie Sie vue2.0 zum Implementieren von Navigationswächtern verwenden. Was sind die Vorsichtsmaßnahmen für die Verwendung von vue2.0 zum Implementieren von Navigationswächtern?

Der Name Navigationswächter klingt seltsam, aber da das offizielle Dokument ihn so übersetzt, nennen wir ihn so.

Fügen Sie die Dokumentadresse ein: https://router.vuejs.org/zh-cn/advanced/navigation-guards.html

Global Guard

Sie können router.beforeEach verwenden, um einen globalen beforeEach-Guard zu registrieren:

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

Wenn eine Navigation ausgelöst wird, wird der globale beforeEach-Guard in der Reihenfolge seiner Erstellung aufgerufen. Guards werden asynchron analysiert und ausgeführt. Zu diesem Zeitpunkt wartet die Navigation, bis alle Guards aufgelöst sind.

Jede Guard-Methode erhält drei Parameter:

zu: Route: die einzugebende Zielroute Objekt

von: Route: Die Route, die die aktuelle Navigation verlassen wird

next: Funktion: Diese Methode muss aufgerufen werden, um diesen Hook aufzulösen. Der Ausführungseffekt hängt von den Aufrufparametern der nächsten Methode ab.

next(): Fahren Sie mit dem nächsten Hook in der Pipeline fort. Wenn alle Hooks ausgeführt werden, wird der -Status der Navigation bestätigt.

next(false): Aktuelle Navigation unterbrechen. Wenn sich die URL des Browsers ändert (vielleicht manuell durch den Benutzer oder durch die Zurück--Schaltfläche des Browsers), wird die URL-Adresse auf die Adresse zurückgesetzt, die der Absenderroute entspricht.

next('/') oder next({ path: '/' }): Zu einer anderen Adresse springen. Die aktuelle Navigation wird unterbrochen und eine neue Navigation gestartet.

next(error): (2.4.0+) Wenn der an next übergebene Parameter eine Fehlerinstanz ist, wird die Navigation beendet und der Fehler an den von router.onError() registrierten Rückruf übergeben.

Stellen Sie sicher, dass Sie die nächste Methode aufrufen, sonst wird der Hook nicht aufgelöst.

Schreiben Sie unten ein Beispiel:

Listen Sie die „Routensammlung“ auf, die beim Springen zur Route in der Sammlung benötigt wird, wenn „nicht“ angezeigt wird Anmeldestatus" , dann zur Anmeldeseite LoginPage springen;

Beim direkten Aufrufen der Anmeldeseite LoginPage, wenn „Anmeldestatus", dann zur Startseite HomePage springen;

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;

I Ich glaube, Sie haben den Fall in diesem Artikel gelesen. Sie beherrschen die Methode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So verwenden Sie jQuery, um zufällige Farben zu erhalten

JS implementiert die einfachste Suche, Sortierung und Entfernung Neu-Algorithmus

Das obige ist der detaillierte Inhalt vonSo implementieren Sie Navigation Guard mit vue2.0. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!