Vue3에는 주소 표시줄 매개변수를 얻는 두 가지 방법이 있습니다: 쿼리 매개변수와 경로 매개변수.
Vue3은 라우팅 라우터에서 주소 표시줄 매개변수를 가져옵니다. 쿼리 매개변수와 경로 매개변수는 다양한 방법으로 가져옵니다.
예를 들어 주소 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 'vue-router' const { currentRoute } = useRouter(); const route = currentRoute.value; onMounted(()=>{ let code=route.query.code console.log('code', code) }) </script>
경로 매개변수는 다음과 같은 매개변수를 참조합니다. 주소 표시줄에 연결됩니다.
예를 들어 주소 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.params
route.params
<script setup> import {useRouter} from 'vue-router' const { currentRoute } = useRouter(); const route = currentRoute.value; onMounted(()=>{ let code=route.params.code console.log('code', code) }) </script>
入口页面App.vue
必须定义好router-view
标签,不能图简单将上面定义的home组件直接引入到App.vue
中,如果直接引入走的就不是路由了,因而通过useRouter
也无法获取到路由参数了
如下错误示例:
<template> <div id="app"> <home></home> </div> </template> <script setup> import home from './views/home.vue'; </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 중국어 웹사이트의 기타 관련 기사를 참조하세요!