Wie erstelle ich dynamisches Routing mit Vue und Vue-Router?

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 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

Öffnen Sie die Datei index.js und fügen Sie den folgenden Code hinzu:

rrreee

Im obigen Code definieren wir ein routes-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.
Der Parameter 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!