Vue3에서 주소 표시줄 매개변수를 얻는 방법

Vue3에는 주소 표시줄 매개변수를 얻는 두 가지 방법이 있습니다: 쿼리 매개변수와 경로 매개변수.

Vue3은 라우팅 라우터에서 주소 표시줄 매개변수를 가져옵니다. 쿼리 매개변수와 경로 매개변수는 다양한 방법으로 가져옵니다.

1. 쿼리 매개변수

예를 들어 주소 http://127.0.0.1:5173/?code=123123,
코드 매개변수를 얻으려면 해당 경로를 참고하세요. query

먼저 라우터/인덱스에 있어야 합니다. 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

에서 경로를 정의한 다음 컴포넌트

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

에서 useRouter를 통해 쿼리 매개변수를 얻을 수 있습니다. 2. 경로 매개변수

경로 매개변수는 다음과 같은 매개변수를 참조합니다. 주소 표시줄에 연결됩니다.
예를 들어 주소 http://127.0.0.1:5173/123123
마지막 123123이 매개변수입니다.

이런 종류의 매개변수는 먼저 경로를 정의하고 경로의 매개변수 이름을 지정해야 합니다. 다음 코드에서 코드는 경로 매개변수 코드의 이름을 지정하는 것입니다.

먼저 라우터/인덱스에서 경로 및 경로 매개변수를 정의해야 합니다. .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

그런 다음 home.vue 구성 요소에서 useRouter를 통해 매개변수를 가져올 수 있습니다. 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>

Three. Notes🎜🎜입력 페이지는 App.vue를 정의해야 합니다. <code>router-view 태그를 사용하면 위에서 정의한 홈 컴포넌트를 App.vue에 직접 도입할 수 없습니다. 라우팅되지 않으므로 useRouter를 통해서도 라우팅 매개변수를 얻을 수 없습니다🎜🎜다음 오류 예:🎜rrreee🎜올바른 방법은 router-view 태그를 사용하는 것입니다🎜rrreee

위 내용은 Vue3에서 주소 표시줄 매개변수를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!