Wie erstelle ich dynamische Routen mit Vue und Vue-Router?
In modernen Webanwendungen ist dynamisches Routing eines der sehr verbreiteten und wichtigen Features. Vue und Vue-Router sind zwei beliebte Front-End-Frameworks, mit denen wir auf einfache Weise dynamisches Routing erstellen können. In diesem Artikel werde ich vorstellen, wie man mit Vue und Vue-Router dynamisches Routing implementiert, und einige spezifische Codebeispiele geben.
Zuerst müssen wir Vue und Vue-Router installieren. Führen Sie im Terminal den folgenden Befehl aus:
npm install vue vue-router
Sobald die Installation abgeschlossen ist, können wir mit der Erstellung unserer Vue-Anwendung beginnen.
Erstellen Sie ein neues Vue-Projekt und öffnen Sie das Terminal im Projektordner.
Führen Sie den folgenden Befehl aus, um eine Vue-Instanz zu erstellen:
vue create dynamic-router
Gehen Sie nach der Erstellung in den Projektordner und installieren Sie Vue-Router:
cd dynamic-router npm install vue-router
Jetzt können wir mit dem Schreiben unseres dynamischen Routings beginnen.
Zuerst müssen wir einen router
-Ordner unter dem src
-Ordner und eine index.js
-Datei unter dem Ordner erstellen. 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
index.js
und fügen Sie den folgenden Code hinzu: rrreee
Im obigen Code definieren wir einroutes
-Array, das unsere dynamischen Routen enthält. Wir können sehen, dass wir zusätzlich zum regulären Routing-Pfad auch einen dynamischen Routing-Pfad /user/:id
definieren. id
kann hier eine beliebige Benutzer-ID sein, die wir angeben möchten. 🎜🎜In der dynamischen Routing-Komponente müssen wir $route.params
im <template>
-Tag der Vue-Komponente verwenden, um auf die dynamischen Routing-Parameter zuzugreifen. Beispielsweise können wir in der Komponente User.vue
$route.params.id
verwenden, um die Benutzer-ID abzurufen. 🎜🎜Jetzt müssen wir einen Ordner views
unter dem Ordner src
erstellen und Home.vue
, About.vue- und User.vue
-Komponenten. 🎜🎜Geben Sie die Komponente Home.vue
ein und bearbeiten Sie den folgenden Code: 🎜rrreee🎜Geben Sie die Komponente About.vue
ein und bearbeiten Sie den folgenden Code: 🎜rrreee🎜Geben Sie ein Benutzer gerendert und angezeigt werden Die ID des Benutzers. 🎜🎜Schließlich müssen wir unsere Route in der Datei <code>main.js
im Ordner src
einführen und verwenden. 🎜🎜Öffnen Sie die Datei main.js
und bearbeiten Sie den folgenden Code: 🎜rrreee🎜Jetzt haben wir die Konfiguration von Vue und Vue-Router abgeschlossen und können unsere Anwendung starten. 🎜🎜Führen Sie den folgenden Befehl im Terminal aus: 🎜rrreee🎜 Öffnen Sie dann ein Browserfenster und besuchen Sie http://localhost:8080
. 🎜🎜Sie sehen eine Startseite. Klicken Sie auf den Link „Info“ in der Navigationsleiste. Sie werden zur Seite „Info“ weitergeleitet. Wenn Sie außerdem http://localhost:8080/user/123
in die Adressleiste des Browsers eingeben, wird eine Seite mit „Benutzerprofil“ und „Benutzer-ID: 123“ angezeigt. 🎜🎜Dies ist ein einfaches Beispiel dafür, wie man mit Vue und Vue-Router dynamisches Routing erstellt. Ich hoffe, dieser Artikel ist hilfreich für Sie! 🎜Das obige ist der detaillierte Inhalt vonWie erstelle ich dynamisches Routing mit Vue und Vue-Router?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!