vue2.0 implementiert Navigation Guard (Routing Guard)

In diesem Artikel werden hauptsächlich die relevanten Kenntnisse von vue2.0 zur Implementierung von Navigationswächtern (Routenwächtern) vorgestellt. Das von vue-route bereitgestellte beforeRouteUpdate kann problemlos auf Navigationswächter (Navigationswächter) zurückgreifen.

Die Durchführung einiger Überprüfungen vor dem Weiterleiten von Sprüngen, wie z. B. die Anmeldeüberprüfung, ist eine häufige Anforderung auf Websites.

In dieser Hinsicht kann das von vue-route bereitgestellte beforeRouteUpdate problemlos Navigationswächter (Navigationswächter) implementieren.

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 aufgerufen Schaffung. Guards werden asynchron analysiert und ausgeführt. Zu diesem Zeitpunkt wartet die Navigation, bis alle Guards aufgelöst sind.

Jede Schutzmethode erhält drei Parameter:

zu: Route: das einzugebende Zielroutenobjekt

von: Route: die aktuelle Navigation Route, die gleich 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 Navigationsstatus bestätigt.

next(false): Aktuelle Navigation unterbrechen. Wenn sich die URL des Browsers ändert (vielleicht manuell durch den Benutzer oder über die Zurück-Schaltfläche des Browsers), wird die URL-Adresse auf die Adresse zurückgesetzt, die der Von-Route 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“ und springe dann zur Anmeldeseite „LoginPage“;

Wenn du die Anmeldeseite „LoginPage“ direkt betrittst, springe bei „Anmeldestatus“ zur Startseite „HomePage“;

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;

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

So lösen Sie das Problem des Syntaxregelerkennungsfehlers in Vue

Über die Verwendung von jsx Syntax in Vue-Komponenten Einführung

Einführung in das Vue-basierte Lazy-Loading-Plug-in vue-view-lazy

Das obige ist der detaillierte Inhalt vonvue2.0 implementiert Navigation Guard (Routing Guard). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!