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

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

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

三、注意点

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

如下错误示例：

正确应该是使用router-view