Heim> Web-Frontend> View.js> Hauptteil

So erhalten Sie Adressleistenparameter in Vue3

王林
Freigeben: 2023-05-15 22:25:04
nach vorne
5496 Leute haben es durchsucht

Vue3 bietet zwei Möglichkeiten, Adressleistenparameter abzurufen: Abfrageparameter und Pfadparameter.

Vue3 erhält die Adressleistenparameter vom Routing-Router. Die Abfrageparameter und Pfadparameter werden auf unterschiedliche Weise erhalten.

1. Abfrageparameter

Zum Beispiel die Adresse http://127.0.0.1:5173/?code=123123,
Wenn wir die erhalten möchten Code-Parameter, wir können ihn vom Router erhalten. Beachten Sie, dass route.query

Zuerst müssen Sie die Route in router/index.js definieren

import { createRouter, createWebHistory } from 'vue-router' const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes: [ { path: '/', name: 'home', component: () => import('../views/home.vue') }, ] }) export default router
Nach dem Login kopieren

Dann können Sie erhalten die Abfrageparameter über useRouter in der Komponente# #

Nach dem Login kopieren

2. Pfadparameter

Die Pfadparameter beziehen sich auf die Parameter, die in der Adressleiste gespleißt sind.

Zum Beispiel die Adresse http://127.0.0.1:5173/123123
Die letzte 123123 ist der Parameter.

Diese Art von Parameter muss zuerst in der Route definiert werden und der Parameter muss im folgenden Code benannt werden: code dient zum Benennen eines Pfadparameters code

# #Zuerst muss es in router/index sein. Definieren Sie die Routen- und Pfadparameter in .js

import { createRouter, createWebHistory } from 'vue-router' const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes: [ { path: '/:code', name: 'home', component: () => import('../views/home.vue') }, ] }) export default router
Nach dem Login kopieren

Dann können Sie die Parameter über die Route useRouter in der home.vue-Komponente abrufen Es istroute.params

Nach dem Login kopieren

3. Hinweiseroute.params

 
Nach dem Login kopieren

三、注意点

入口页面App.vue必须定义好router-view标签,不能图简单将上面定义的home组件直接引入到App.vue中,如果直接引入走的就不是路由了,因而通过useRouter也无法获取到路由参数了

如下错误示例:

 
Nach dem Login kopieren

正确应该是使用router-view

Die Einstiegsseite App.vuemuss den router-view-Tag, und Sie können die obige Definition nicht einfach hinzufügen. Die Home-Komponente wird direkt in App.vueeingeführt. Wenn sie direkt eingeführt wird, wird sie nicht weitergeleitet, also weitergeleitet Parameter können nicht über useRouterabgerufen werden /code> Tag ##rrreee

Das obige ist der detaillierte Inhalt vonSo erhalten Sie Adressleistenparameter in Vue3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:yisu.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn