Vue3.0路由传参

最新推荐文章于 2025-10-07 16:57:51 发布

原创最新推荐文章于 2025-10-07 16:57:51 发布 · 5.6k 阅读

6 ·

CC 4.0 BY-SA版权

web 同时被 2 个专栏收录

29 篇文章

订阅专栏

html

8 篇文章

订阅专栏

本文介绍了在Vue 3中如何使用query和params进行路由传参，展示了如何在组件间通过useRoute和useRouter获取参数，并对比了两者在路由跳转上的不同。同时提及了在注册路由时强制参数的重要性。

Vue 之路由传参

在 vue3.0 里面使用路由必须要引入 useRouter 和 useRoute

import { useRoute, useRouter } from 'vue-router'

秉承谁长谁先死,Router 长所以他负责跳转,Route 负责接收数据

传参使用query和params，主要区别就是前者使用path进行跳转，后者使用name进行跳转

//使用query
function useHooks() {
  const Router = useRouter() //跳转
  const Route = useRoute() //获取到值
  const Routeid = computed(() => {
    return Route.query.id
  })
  const gotourl = () => {
    console.log('执行了')
    Router.push({
      path: '/about',
      query: {
        id: '6666',
      },
    })
  }
  return {
    gotourl,
    Routeid,
  }
}

//使用params
function useHooks() {
  const Router = useRouter() //跳转
  const Route = useRoute() //获取到值
  const Routename = computed(() => {
    return Route.params.id
  })
  const gotourl = () => {
    console.log('执行了')
    Router.push({
      name: 'about',
      params: {
        id: '6666',
      },
    })
  }
  return {
    gotourl,
    Routename ,
  }
}

以上这两种方式无需设定路由切换时必须传入参数，相对来说比较灵活，还有一种方式实在注册路由的时候规定必须要传入的参数

{
    path: '/houselist2/:data',
    name: 'houselist2',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/Houselist2.vue')
  }


 const route = useRoute();
    console.log(route.params.data)//注意这里使用的是params