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.
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
Dann können Sie erhalten die Abfrageparameter über useRouter in der Komponente# #
Zum Beispiel die Adresse http://127.0.0.1:5173/123123
Die letzte 123123 ist der Parameter.
# #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
Dann können Sie die Parameter über die Route useRouter in der home.vue-Komponente abrufen Es istroute.params
3. Hinweiseroute.params
入口页面App.vue
必须定义好router-view
标签,不能图简单将上面定义的home组件直接引入到App.vue
中,如果直接引入走的就不是路由了,因而通过useRouter
也无法获取到路由参数了
如下错误示例:
正确应该是使用router-view
App.vue
muss den
router-view
-Tag, und Sie können die obige Definition nicht einfach hinzufügen. Die Home-Komponente wird direkt in
App.vue
eingeführt. Wenn sie direkt eingeführt wird, wird sie nicht weitergeleitet, also weitergeleitet Parameter können nicht über
useRouter
abgerufen 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!