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>Home</h1>
  </div>
</template>

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

<template>
  <div>
    <h1>About</h1>
  </div>
</template>

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

<template>
  <div>
    <h1>User Profile</h1>
    <h2>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

rrreee

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!