So erhalten Sie Adressleistenparameter in Vue3

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

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

<script setup>
import {useRouter} from &#39;vue-router&#39;

const { currentRoute } = useRouter();
const route = currentRoute.value;

onMounted(()=>{
  let code=route.query.code
  console.log(&#39;code&#39;, code)
})

</script>

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

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

<script setup>
import {useRouter} from &#39;vue-router&#39;

const { currentRoute } = useRouter();
const route = currentRoute.value;

onMounted(()=>{
  let code=route.params.code
  console.log(&#39;code&#39;, code)
})

</script>

3. Hinweiseroute.params

<template>
  <div id="app">
    <home></home>
  </div>

</template>

<script setup>
import home from &#39;./views/home.vue&#39;;
</script>

三、注意点

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

如下错误示例：

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>
<script setup>

</script>

正确应该是使用router-view

Die Einstiegsseite 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!