Comment créer un routage dynamique à l'aide de Vue et Vue-Router ?

Comment créer des itinéraires dynamiques avec Vue et Vue-Router ?

Dans les applications Web modernes, le routage dynamique est l'une des fonctionnalités les plus courantes et les plus importantes. Vue et Vue-Router sont deux frameworks frontaux populaires qui peuvent nous aider à créer facilement un routage dynamique. Dans cet article, je vais présenter comment utiliser Vue et Vue-Router pour implémenter le routage dynamique et donner quelques exemples de code spécifiques.

Tout d'abord, nous devons installer Vue et Vue-Router. Exécutez la commande suivante dans le terminal :

npm install vue vue-router

Une fois l'installation terminée, nous pouvons commencer à créer notre application Vue.

Créez un nouveau projet Vue et ouvrez le terminal dans le dossier du projet.

Exécutez la commande suivante pour créer une instance Vue :

vue create dynamic-router

Après la création, allez dans le dossier du projet et installez Vue-Router :

cd dynamic-router
npm install vue-router

Maintenant, nous pouvons commencer à écrire notre routage dynamique.

Tout d'abord, nous devons créer un dossier router sous le dossier src et créer un fichier index.js sous le dossier. src文件夹下创建一个router文件夹，在该文件夹下创建一个index.js文件。

打开index.js文件，并添加以下代码：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
  },
  {
    path: '/user/:id',
    name: 'User',
    component: () => import('../views/User.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

在以上代码中，我们定义了一个routes数组，其中包含了我们的动态路由。我们可以看到，除了常规的路由路径之外，我们还定义了一个动态路由路径/user/:id。
这里的id参数可以是我们想要指定的任何用户ID。

在动态路由组件中，我们需要在Vue组件的<template>标签中使用$route.params来访问动态路由参数。例如，在User.vue组件中，我们可以使用$route.params.id来获取用户ID。

现在，我们需要在src文件夹下创建一个views文件夹，并在该文件夹下创建Home.vue、About.vue和User.vue组件。

进入Home.vue组件，并编辑以下代码：

<template>
  <div>
    <h1 id="Home">Home</h1>
  </div>
</template>

进入About.vue组件，并编辑以下代码：

<template>
  <div>
    <h1 id="About">About</h1>
  </div>
</template>

进入User.vue组件，并编辑以下代码：

<template>
  <div>
    <h1 id="User-Profile">User Profile</h1>
    <h2 id="User-ID-route-params-id">User ID: {{ $route.params.id }}</h2>
  </div>
</template>

当用户访问/user/:id路径时，将会渲染User.vue组件，并显示用户的ID。

最后，我们需要在src文件夹下的main.js文件中引入并使用我们的路由。

打开main.js文件，并编辑以下代码：

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

现在，我们已经完成了Vue和Vue-Router的配置，可以启动我们的应用程序了。

在终端中运行以下命令：

npm run serve

然后打开一个浏览器窗口，并访问http://localhost:8080。

你会看到一个Home页面，点击导航栏上的About链接，你将被重定向到About页面。此外，如果你在浏览器地址栏中输入http://localhost:8080/user/123

Ouvrez le fichier index.js et ajoutez le code suivant :

rrreee

Dans le code ci-dessus, nous définissons un tableau routes, qui contient nos routes dynamiques. Nous pouvons voir qu'en plus du chemin de routage normal, nous définissons également un chemin de routage dynamique /user/:id.
Le paramètre id ici peut être n'importe quel identifiant utilisateur que nous souhaitons spécifier. 🎜🎜Dans le composant de routage dynamique, nous devons utiliser $route.params dans la balise <template> du composant Vue pour accéder aux paramètres de routage dynamique. Par exemple, dans le composant User.vue, nous pouvons utiliser $route.params.id pour obtenir l'ID utilisateur. 🎜🎜Maintenant, nous devons créer un dossier views sous le dossier src et créer Home.vue, About.vue et User.vue. 🎜🎜Entrez le composant Home.vue et éditez le code suivant : 🎜rrreee🎜Entrez le composant About.vue et éditez le code suivant : 🎜rrreee🎜Entrez Composant User.vue et modifiez le code suivant : 🎜rrreee🎜Lorsque l'utilisateur accède au chemin /user/:id, le composant User.vue être rendu et affiché L'ID de l'utilisateur. 🎜🎜Enfin, nous devons introduire et utiliser notre route dans le fichier main.js sous le dossier src. 🎜🎜Ouvrez le fichier main.js et éditez le code suivant : 🎜rrreee🎜Maintenant, nous avons terminé la configuration de Vue et Vue-Router et pouvons démarrer notre application. 🎜🎜Exécutez la commande suivante dans le terminal : 🎜rrreee🎜 Ensuite, ouvrez une fenêtre de navigateur et visitez http://localhost:8080. 🎜🎜Vous verrez une page d'accueil, cliquez sur le lien À propos de la barre de navigation, vous serez redirigé vers la page À propos. De plus, si vous saisissez http://localhost:8080/user/123 dans la barre d'adresse du navigateur, vous verrez une page contenant « Profil utilisateur » et « ID utilisateur : 123 ». 🎜🎜 Ceci est un exemple simple de la façon d'utiliser Vue et Vue-Router pour créer un routage dynamique. J'espère que cet article vous sera utile ! 🎜

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!