Comment obtenir les paramètres de la barre d'adresse dans Vue3

Vue3 propose deux manières d'obtenir les paramètres de la barre d'adresse : les paramètres de requête et les paramètres de chemin.

Vue3 obtient les paramètres de la barre d'adresse du routeur de routage. Les paramètres de requête et les paramètres de chemin sont obtenus de différentes manières.

1. Paramètres de requête

Par exemple, l'adresse http://127.0.0.1:5173/?code=123123,
Si nous voulons obtenir le paramètre de code, nous pouvons l'obtenir depuis le routeur. query

doit d'abord être dans router/index. Définissez la route dans js

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

Ensuite, vous pouvez obtenir les paramètres de requête via useRouter dans le composant

<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. Paramètres de chemin

Les paramètres de chemin font référence aux paramètres qui sont épissé dans la barre d'adresse.
Par exemple, l'adresse http://127.0.0.1:5173/123123
Le dernier 123123 est le paramètre.

Ce type de paramètre doit d'abord définir la route, et nommer le paramètre dans la route dans le code suivant : code consiste à nommer un code de paramètre de chemin

Tout d'abord, vous devez définir les paramètres de route et de chemin dans le routeur/index. .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

Ensuite, vous pouvez obtenir les paramètres via useRouter dans le composant home.vue. Notez que route.paramsroute.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>

三、注意点

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

如下错误示例：

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

</template>

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

正确应该是使用router-view

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

</script>

Trois Notes🎜🎜La page d'entrée App.vue<.> doit être défini Avec la balise <code>router-view, vous ne pouvez pas simplement introduire le composant home défini ci-dessus directement dans App.vue. Si vous l'introduisez directement, il le fera. pas de routage, donc via useRouter ne peut pas non plus obtenir les paramètres de routage🎜🎜L'exemple d'erreur suivant :🎜rrreee🎜La chose correcte est d'utiliser la balise router-view🎜rrreee

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!