vue2.0 implémente la garde de navigation (garde de routage)-js tutoriel-php.cn

vue2.0 implémente la garde de navigation (garde de routage)

不言

Libérer： 2018-07-04 13:43:54

original

1587 Les gens l'ont consulté

Cet article présente principalement les connaissances pertinentes de vue2.0 pour implémenter les gardes de navigation (gardes de route). Le beforeRouteUpdate fourni par vue-route peut facilement implémenter les gardes de navigation (gardes de navigation) Les amis dans le besoin peuvent s'y référer

Effectuer une vérification avant les sauts de routage, comme la vérification de la connexion, est une exigence courante sur les sites Web.

À cet égard, beforeRouteUpdate fourni par vue-route peut facilement implémenter des gardes de navigation (navigation-guards).

Le nom navigation-guards semble bizarre, mais puisque le document officiel le traduit ainsi, appelons-le ainsi.

Collez l'adresse du document : https://router.vuejs.org/zh-cn/advanced/navigation-guards.html

Global Guard

Vous pouvez utiliser router.beforeEach pour enregistrer une garde globale beforeEach :

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

Copier après la connexion

Lorsqu'une navigation est déclenchée, la garde globale beforeEach est appelée dans le ordre de création. Les gardes sont analysées et exécutées de manière asynchrone. À ce stade, la navigation attend que toutes les gardes soient résolues.

Chaque méthode de garde reçoit trois paramètres :

vers : Route : l'objet route cible à saisir

depuis : Route : la navigation actuelle Le route qui est sur le point de partir

suivant : Fonction : Cette méthode doit être appelée pour résoudre ce hook. L'effet d'exécution dépend des paramètres d'appel de la méthode suivante.

next() : passez au hook suivant dans le pipeline. Si tous les hooks sont exécutés, l'état de navigation est confirmé.

next(false) : Interrompre la navigation en cours. Si l'URL du navigateur change (peut-être manuellement par l'utilisateur ou par le bouton Précédent du navigateur), l'adresse URL sera réinitialisée à l'adresse correspondant à l'itinéraire d'origine.

next('/') ou next({ path: '/' }) : accédez à une autre adresse. La navigation en cours est interrompue et une nouvelle navigation démarre.

next(error) : (2.4.0+) Si le paramètre passé à next est une instance d'Erreur, la navigation sera terminée et l'erreur sera transmise au rappel enregistré par router.onError().

Assurez-vous d'appeler la méthode suivante, sinon le hook ne sera pas résolu.

Écrivez un exemple ci-dessous :

Listez la « collection d'itinéraires » qui doit déterminer le statut de connexion lorsque vous accédez à l'itinéraire dans la collection, si le « non ». statut de connexion", puis passez à la page de connexion LoginPage ;

Lorsque vous entrez directement dans la page de connexion LoginPage, si "statut de connexion", passez à la page d'accueil de la page d'accueil ;

import Vue from &#39;vue&#39;;
import Router from &#39;vue-router&#39;;
import LoginPage from &#39;@/pages/login&#39;;
import HomePage from &#39;@/pages/home&#39;;
import GoodsListPage from &#39;@/pages/good-list&#39;;
import GoodsDetailPage from &#39;@/pages/good-detail&#39;;
import CartPage from &#39;@/pages/cart&#39;;
import ProfilePage from &#39;@/pages/profile&#39;;
Vue.use(Router)
const router = new Router({
 routes: [
 {
  path: &#39;/&#39;, // 默认进入路由
  redirect: &#39;/home&#39; //重定向
 },
 {
  path: &#39;/login&#39;,
  name: &#39;login&#39;,
  component: LoginPage
 },
 {
  path: &#39;/home&#39;,
  name: &#39;home&#39;,
  component: HomePage
 },
 {
  path: &#39;/good-list&#39;,
  name: &#39;good-list&#39;,
  component: GoodsListPage
 },
 {
  path: &#39;/good-detail&#39;,
  name: &#39;good-detail&#39;,
  component: GoodsDetailPage
 },
 {
  path: &#39;/cart&#39;,
  name: &#39;cart&#39;,
  component: CartPage
 },
 {
  path: &#39;/profile&#39;,
  name: &#39;profile&#39;,
  component: ProfilePage
 },
 {
  path: &#39;**&#39;, // 错误路由
  redirect: &#39;/home&#39; //重定向
 },
 ]
});
// 全局路由守卫
router.beforeEach((to, from, next) => {
 console.log(&#39;navigation-guards&#39;);
 // to: Route: 即将要进入的目标 路由对象
 // from: Route: 当前导航正要离开的路由
 // next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
 const nextRoute = [&#39;home&#39;, &#39;good-list&#39;, &#39;good-detail&#39;, &#39;cart&#39;, &#39;profile&#39;];
 let isLogin = global.isLogin; // 是否登录
 // 未登录状态；当路由到nextRoute指定页时，跳转至login
 if (nextRoute.indexOf(to.name) >= 0) { 
 if (!isLogin) {
  console.log(&#39;what fuck&#39;);
  router.push({ name: &#39;login&#39; })
 }
 }
 // 已登录状态；当路由到login时，跳转至home
 if (to.name === &#39;login&#39;) {
 if (isLogin) {
  router.push({ name: &#39;home&#39; });
 }
 }
 next();
});
export default router;

Copier après la connexion

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Comment résoudre le problème de l'erreur de détection des règles de syntaxe dans vue

À propos de l'utilisation de jsx syntaxe dans les composants vue Introduction

Introduction au plug-in de chargement paresseux basé sur Vue vue-view-lazy

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!