vue路由传参数的方法（Vue3的路由传参汇总）

目录

1. name + params

2. name + query

3. path + query

4. 路径字符串？拼接参数

5. 路径字符串 / 拼接参数

下面方法刷新参数都不会丢失

1. name + params

路由配置(需要配置成动态路由形式 
    
    
，原先的直接传参不能用了)

import { createRouter, createWebHistory } from vue-router import HomeView from ../views/HomeView.vue const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes: [ { path: /, name: home, component: HomeView, }, { path: /about/:id, name: about, component: () => import(../views/AboutView.vue), }, ], }) export default router

组件A

<script> import { useRouter } from vue-router export default { name: Home, setup() { const router = useRouter() const toAbout = () => { router.push({ name: about, params: { id: 100, }, }) } return { toAbout, } }, } </script> <template> <main> <button @click="toAbout">to About</button> </main> </template>

组件B

<script> import { useRoute } from vue-router export default { name: about, setup() { const route = useRoute() console.log(99999999, route.params) }, } </script> <template> <div class="about"> <h1>about</h1> </div> </template>

2. name + query

路由配置（普通形式即可
     


     


     ，query会将参数?拼接到路径上）

import { createRouter, createWebHistory } from vue-router import HomeView from ../views/HomeView.vue const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes: [ { path: /, name: home, component: HomeView, }, { path: /about, name: about, component: () => import(../views/AboutView.vue), }, ], }) export default router

组件A

<script> import { useRouter } from vue-router export default { name: Home, setup() { const router = useRouter() const toAbout = () => { router.push({ name: about, query: { id: 100, }, }) } return { toAbout, } }, } </script> <template> <main> <button @click="toAbout">to About</button> </main> </template>

组件B

<script> import { useRoute } from vue-router export default { name: about, setup() { const route = useRoute() console.log(99999999, route.query) }, } </script> <template> <div class="about"> <h1>about</h1> </div> </template>

3. path + query

路由配置（普通形式即可 




 




 



，query会将参数?拼接到路径上）

import { createRouter, createWebHistory } from vue-router import HomeView from ../views/HomeView.vue const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes: [ { path: /, name: home, component: HomeView, }, { path: /about, name: about, component: () => import(../views/AboutView.vue), }, ], }) export default router

组件A

<script> import { useRouter } from vue-router export default { name: Home, setup() { const router = useRouter() const toAbout = () => { router.push({ path: /about, query: { id: 100, }, }) } return { toAbout, } }, } </script> <template> <main> <button @click="toAbout">to About</button> </main> </template>

组件B

<script> import { useRoute } from vue-router export default { name: about, setup() { const route = useRoute() console.log(99999999, route.query) }, } </script> <template> <div class="about"> <h1>about</h1> </div> </template>

4. 路径字符串？拼接参数

路由配置

import { createRouter, createWebHistory } from vue-router import HomeView from ../views/HomeView.vue const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes: [ { path: /, name: home, component: HomeView, }, { path: /about, name: about, component: () => import(../views/AboutView.vue), }, ], }) export default router

组件A

<script> import { useRouter } from vue-router export default { name: Home, setup() { const router = useRouter() const toAbout = () => { router.push(/about?id=100) } return { toAbout, } }, } </script> <template> <main> <button @click="toAbout">to About</button> </main> </template>

组件B

<script> import { useRoute } from vue-router export default { name: about, setup() { const route = useRoute() console.log(99999999, route.query) }, } </script> <template> <div class="about"> <h1>about</h1> </div> </template>

5. 路径字符串 / 拼接参数

路由配置

import { createRouter, createWebHistory } from vue-router import HomeView from ../views/HomeView.vue const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes: [ { path: /, name: home, component: HomeView, }, { path: /about/:id, name: about, component: () => import(../views/AboutView.vue), }, ], }) export default router

组件A

<script> import { useRouter } from vue-router export default { name: Home, setup() { const router = useRouter() const toAbout = () => { router.push(/about/100) } return { toAbout, } }, } </script> <template> <main> <button @click="toAbout">to About</button> </main> </template>

组件B

<script> import { useRoute } from vue-router export default { name: about, setup() { const route = useRoute() console.log(99999999, route.params) }, } </script> <template> <div class="about"> <h1>about</h1> </div> </template>