Parlons du routage dans Vue3 et analysons brièvement les méthodes de configuration du routage

Cet article vous guidera à travers le routage dans Vue3 et parlera de la configuration de base du routage, de la configuration du routage dynamique, du mode de routage, de la redirection de routage, etc. J'espère qu'il vous sera utile.

【Recommandation associée : "tutoriel vue.js"】

Configuration de base du routage

1 Installez le plug-in

npm install vue-router@next --save

2 Créez un fichier routers.ts

3. .ts Introduire les composants et configurer les chemins.

import { createRouter,createWebHashHistory } from 'vue-router';
// 引入组件
import Home from './components/Home.vue';
import News from './components/News.vue';
import User from './components/User.vue';

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {path: '/', component: Home},
    {path: '/news', component: News},
    {path: '/user', component: User},
  ]
})

export default router;

4. Montez le fichier de routage sur vue dans main.ts.

import { createApp } from 'vue'
import App from './App.vue'
import routers from './routers';

// createApp(App).mount('#app')

const app = createApp(App);
app.use(routers);
app.mount('#app');

5. Une fois que le composant qui utilise le routage monte router-link via le composant router-view ou router-link

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <ul>
    <li>
      <router-link to="/">首页</router-link>
    </li>
    <li>
      <router-link to="/news">新闻</router-link>
    </li>
    <li>
      <router-link to="/user">用户</router-link>
    </li>
  </ul>

  <router-view></router-view>
</template>

, il vous suffit de saisir l'itinéraire spécifié sur le chemin de la page correspondant au composant pour terminer le saut. . Router -link implémente le routage sous la forme d'un saut d'étiquette.

Configuration du routage dynamique

Configurez le routage dans routes.ts comme suit et configurez le routage dynamique via /:aid.

//配置路由
const router = createRouter({

    history: createWebHashHistory(),
    routes: [
        { path: '/', component: Home , alias: '/home' },
        { path: '/news', component: News },
        { path: '/user', component: User },
        { path: '/newscontent/:aid', component: NewsContent },
    ], 
})

Lorsque vous passez par le lien du routeur, une chaîne de modèle et deux points + to sont requis.

<ul>
    <li v-for="(item, index) in list" :key="index">
        <router-link  :to="`/newscontent/${index}`"> {{item}}</router-link>
    </li>
</ul>

Obtenez la valeur transmise par la route dynamique via this.$route.params.

mounted(){
    // this.$route.params 获取动态路由的传值
    console.log(this.$route.params)
}

Si nous voulons implémenter un transfert de valeur similaire à GET, nous pouvons utiliser la méthode suivante

1 Configurer la route comme une route normale.

const router = createRouter({

    history: createWebHashHistory(),
    routes: [
        { path: '/', component: Home , alias: '/home' },
        { path: '/news', component: News },
        { path: '/user', component: User },
        { path: '/newscontent', component: NewsContent },
    ], 
})

2. Le lien du routeur saute sous forme de points d'interrogation.

<router-link  :to="`/newscontent?aid=${index}`"> {{item}}</router-link>

3. Obtenez la valeur obtenue grâce à this.$route.query.

console.log(this.$route.query);

Navigation programmatique d'itinéraire (itinéraire de saut JS)

Spécifiez-le simplement via this.$router.push.

  this.$router.push({
    path: '/home'
  })

Si vous souhaitez implémenter le transfert de valeur get, vous pouvez utiliser la méthode suivante.

this.$router.push({
    path: '/home',
    query: {aid: 14}
  })
}

Le routage dynamique doit utiliser la méthode suivante.

  this.$router.push({
    path: '/home/123',
    // query: {aid: 14}
  })

Mode de routage

Mode Hash

La caractéristique typique du mode Hash est que l'itinéraire de la page contient un signe dièse.

const router = createRouter({

    history: createWebHashHistory(),
    routes: [
        ...,
    ], 
})

Mode historique HTML5

• présente createWebHistory.

• L'attribut history dans l'élément de configuration du routeur est défini sur createWebHistory().

import { createRouter, createWebHistory } from 'vue-router'

//配置路由
const router = createRouter({
    history: createWebHistory(),
    routes: [
        ...
    ], 
})

Remarque : Après avoir activé le mode Historique HTML5, vous devez configurer le pseudo-statique lors de la publication sur le serveur.

Méthode pour configurer le pseudo-statique :

https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85% 8D %E7%BD%AE%E4%BE%8B%E5%AD%90

Itinéraire nommé

Situation générale

• Configurer l'attribut nom lors de la définition de l'itinéraire

{ path: '/news', component: News,name:"news" }

• Entrant object Jump

<router-link :to="{name: &#39;news&#39;}">新闻</router-link>

Passer la valeur via GET

• Configurer l'attribut name lors de la définition de la route

{ path: '/newscontent', component: NewsContent, name: "content" },

• Passez dans l'objet incluant la requête

<li v-for="(item, index) in list" :key="index">
    <router-link  :to="{name: &#39;content&#39;,query: {aid: index}}"> {{item}}</router-link>
</li>

Thr Méthode de routage plutôt dynamique

• Définissez le routage dynamique et spécifiez l'attribut de nom

{ path: '/userinfo/:id', name: "userinfo", component: UserInfo }

• Passez dans l'objet incluant les paramètres

<router-link :to="{name: &#39;userinfo&#39;,params: {id: 123}}">跳转到用户详情</router-link>

Le routage programmatique

est très similaire à la méthode ci-dessus.

<button @click="this.$router.push({name: &#39;userinfo&#39;,params: {id: 666}})">点击跳转</button>

Redirection d'itinéraire

{ path: '', redirect: "/home" },   // 路由重定向
{ path: '/home', component: Home },

Alias ​​d'itinéraire

Dans l'exemple ci-dessous, accéder à l'itinéraire des personnes équivaut à accéder à l'itinéraire d'alias.

{ path: '/user', component: User, alias: '/people' }

alias peut également être un tableau.

{ path: '/user', component: User, alias: ['/people','/u']}

forme de routage dynamique.

{ path: '/userinfo/:id', name: "userinfo", component: UserInfo, alias: '/u/:id' }

Routage imbriqué

Le scénario d'application du routage imbriqué se trouve généralement sur la barre de navigation.

• Définissez le routage imbriqué

{
  path: '/user', component: User,
  children: [
    { path: '', redirect: "/user/userlist" },
    { path: 'userlist', component: UserList },
    { path: 'useradd', component: UserAdd }
  ]
}

• router-link et router-view coopèrent pour afficher le contenu

<div class="left">
  <ul>
    <li>
      <router-link to="/user/userlist">用户列表</router-link>
    </li>
    <li>
      <router-link to="/user/useradd">增加用户</router-link>
    </li>
  </ul>
</div>
<div class="right">
  <router-view></router-view>
</div>

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!