Maison  >  Article  >  interface Web  >  Un article qui explique le routage Vue en détail : vue-router

Un article qui explique le routage Vue en détail : vue-router

青灯夜游
青灯夜游avant
2022-09-01 19:43:191894parcourir

Cet article vous donnera une explication détaillée de VueVue-Router dans FamilyMart et découvrira les connaissances pertinentes en matière de routage. J'espère qu'il sera utile à tout le monde !

Un article qui explique le routage Vue en détail : vue-router

L'histoire du développement du routage front-end

Le concept de routage est apparu dans le génie logiciel et a été implémenté pour la première fois dans le routage back-end La raison en est que le développement du Web est principalement passé par les éléments suivants. étapes :

  • Étape de routage back-end ;
  • Étape de séparation front-end et back-end ;
  • Application riche en page unique (SPA) 

1. La page HTML entière est restituée par le serveur

, c'est-à-dire que le serveur produit et restitue directement la page HTML correspondante et la renvoie au client pour affichage. Comme le montre l'image :

Avantages : Propice à l'optimisation du référencement Un article qui explique le routage Vue en détail : vue-router

Inconvénients : La page entière est maintenue par le personnel back-end, le code HTML et la logique correspondante des données seront mélangés, et l'écriture et la maintenance sont très pauvre.

2. Séparation front-end et back-end

**Rendu front-end :**Les ressources statiques impliquées dans chaque requête seront obtenues à partir du serveur de ressources statiques. Ces ressources incluent HTML+CSS+JS, puis ces requêtes sont renvoyées sur les ressources frontales pour le rendu. Chaque requête du client demandera un fichier au serveur de ressources statiques. Pour le moment, le backend est uniquement responsable de fournir l'API.

Séparation du front-end et du back-end :

Le back-end est uniquement responsable de la fourniture de l'API, le front-end obtient les données via Ajax et restitue les données sur la page via JavaScriptLe back- la fin se concentre sur les données, et le front-end se concentre sur l'interaction et la visualisation

  • Étape d'application riche en page (SPA) :

Une couche de routage front-end est ajoutée en fonction de la séparation du front-end et du back-end -end, Le front-end maintient un ensemble de règles de routage

    Core : modifiez l'URL de la page, mais n'actualisez pas la page.
  • Découvrez vue-router
Installez Vue-Router

npm install vue-router
Étapes :

Créez les composants qui doivent être mappés par routage [Recommandations associées :

Tutoriel vidéo Vue

]

import { createRouter, createWebHashHistory } from "vue-router"

import Home from "../views/Home.vue"
import About from "../views/About.vue"
// 创建一个路由:映射关系
const router = new createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: "/",
      redirect: "/home"
    },
    {
      path: "/home",
      component: Home
    },
    {
      path: "/about",
      component: About
    }
  ]
})

export default router
Un article qui explique le routage Vue en détail : vue-router

Supplémentaire : autres attributs de l'itinéraire Un article qui explique le routage Vue en détail : vue-router

attribut name : enregistre le nom unique de l'itinéraire

attribut méta : données personnalisées

router-link (supplémentaire)

router-link In en fait, de nombreux attributs peuvent être configurés :

attribut to : est une chaîne ou un objet

attribut replace : si l'attribut replace est défini, lorsque vous cliquez dessus, router.replace() sera appelé à la place du routeur. pousser(). Généralement, l'attribut replace n'est pas utilisé et l'expérience utilisateur n'est pas très bonne.

    attribut active-class : définit la classe appliquée après l'activation de l'élément a. La valeur par défaut est router-link-active.
  • attribut exact-active-class : lorsque le lien est activé avec précision, la classe appliquée au rendu. is router-link- exact-active ;
  • Chargement paresseux des routes
Problème : lors de l'empaquetage et de la construction d'une application, le package JavaScript deviendra très volumineux, affectant le chargement des pages

Solution : divisez les composants correspondant à différents routes dans différents blocs de code, puis le composant correspondant est chargé lors de l'accès à la route. Dans le même temps, cela peut également améliorer l’efficacité du rendu sur le premier écran. Parmi eux, Vue-Router prend en charge le chargement dynamique des composants par défaut. Étant donné que le composant peut être transmis dans un composant ou recevoir une fonction, la fonction doit remettre une promesse. La fonction import renvoie une promesse

Routage dynamique

Un article qui explique le routage Vue en détail : vue-router

1. La correspondance de base du routage dynamique

mappe les itinéraires du modèle de correspondance donné au même composant. Vous pouvez charger différents itinéraires en fonction de vos différents besoins pour réaliser différentes implémentations et rendus de pages.

L'utilisation du routage dynamique est généralement utilisée en conjonction avec le contrôle des autorisations de rôle.

Par exemple : il existe un composant Utilisateur, qui doit s'afficher pour tous les utilisateurs, mais l'ID de l'utilisateur est différent. Nous pouvons le faire en utilisant un champ dynamique dans le chemin, que nous appelons paramètre de chemin. Ensuite, implémentez le saut dans .

Un article qui explique le routage Vue en détail : vue-router

2. 获取动态路由的值

获取动态路由的值(例如上面例子中 用户id 123),在template中,直接通过 $route.params获取值。

  • 在created中,通过 this.$route.params获取值
  • 在setup中,我们要使用 vue-router库给我们提供的一个hook useRoute

Un article qui explique le routage Vue en détail : vue-router

3. NotFound

对于没有匹配到相应的路由,我们可以给用户匹配一个固定的页面。通过 $route.params.pathMatch获取到传入的参数

Un article qui explique le routage Vue en détail : vue-router

路由的嵌套

组件的本身也有组件需要内部切换,这个时候就可以采用嵌套路由,在第一层路由中也使用router-view来占位之后需要渲染的组件。

Un article qui explique le routage Vue en détail : vue-router

{
      path: "/home",
      component: () => import("../views/Home.vue"),
      children: [
        {
          path: "/show",
          component: () => import("../views/component/show.vue")
        },
        {
          path: "/detail",
          component: () => import("../views/component/detail.vue")
        }
      ]
    },

编程式导航

1. 代码的页面跳转

通过代码来控制页面的跳转

栗子:点击一个按钮跳转页面

Un article qui explique le routage Vue en détail : vue-router

2. query 方式的参数

通过query的方式来传递参数,在界面中通过 $route.query 来获取参数。

Un article qui explique le routage Vue en détail : vue-router

3. 替换当前的位置

使用push的特点是压入一个新的页面,那么在用户点击返回时,上一个页面还可以回退,但是如果我们希望当前页面是一个替换 操作,那么可以使用replace。这个时候已经不能回退了。

4. 页面的前后跳转

  • router 的 go 方法(指定向前(向后)跳转几步)

  • router 的back 方法 (回溯历史,向后一步)

  • router 的forward 方法(历史中前进,向前一步)

动态添加路由

场景:根据用户的不同权限,注册不同的路由

Un article qui explique le routage Vue en détail : vue-router

补充:路由的其他方法

删除路由有以下三种方式:

  • 方式一:添加一个name相同的路由;
  • 方式二:通过removeRoute方法,传入路由的名称;
  • 方式三:通过addRoute方法的返回值回调;

router.hasRoute():检查路由是否存在。

router.getRoutes():获取一个包含所有路由记录的数组。

路由导航守卫

vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航

全局的前置守卫==beforeEach==是在导航触发时会被回调的,它有两个参数:

  • to:即将进入的路由Route对象;
  • from:即将离开的路由Route对象;

返回值:

  • false:取消当前导航;
  • 不返回或者undefined:进行默认导航;
  • 返回一个路由地址:可以是一个String类型的路径也可以是一个对象

Un article qui explique le routage Vue en détail : vue-router

1. 登录守卫功能

场景:只有登录了的用户才能看到的页面

Un article qui explique le routage Vue en détail : vue-router

2. 其他导航守卫

Vue还提供了很多的其他守卫函数,目的都是在某一个时刻给予回调,可以更好的控制程序的流程或者功能

[导航守卫](导航守卫 | Vue Router (vuejs.org))

流程:

  • 导航被触发。

  • 在失活的组件里调用 beforeRouteLeave 守卫。

  • 调用全局的 beforeEach 守卫。

  • 在重用的组件里调用 beforeRouteUpdate 守卫(2.2+)。

  • 在路由配置里调用 beforeEnter。  解析异步路由组件。

  • 在被激活的组件里调用 beforeRouteEnter。

  • Appelez le garde global beforeResolve (2,5+).

  • Navigation confirmée.

  • Appelez le global afterEach hook.

  • Déclenchez la mise à jour du DOM.

  • Appelez la fonction de rappel passée à next dans la garde beforeRouteEnter, et l'instance de composant créée sera transmise en tant que paramètre de la fonction de rappel.

Pour plus de connaissances liées à la programmation, veuillez visiter : Introduction à la programmation ! !

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!

Déclaration:
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer