vue3中路由传递params和query参数和接收

最新推荐文章于 2025-03-27 15:15:19 发布

qq_50526206

最新推荐文章于 2025-03-27 15:15:19 发布

阅读量2.4k

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.youkuaiyun.com/qq_50526206/article/details/125911110

版权

本文详细介绍了在Vue.js中如何使用`params`和`query`进行路由参数传递。通过`router.push`方法，可以使用路径模式或者命名路由来传参，接收参数时则通过`route.params`或`route.query`访问。示例代码展示了如何在组件内获取传递的参数，对于动态路由和查询参数的处理提供了清晰的解释。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

params路由

  {
            //params占位 用来接受路由传递的参数
            path: '/search/:keyWord',
            name: 'search',
            component: () => import('@/views/Search'),
            meta: { show: true }
        },

对象写法

 1router.push(`/search/${keyWord.value}`)
2
            router.push({
                name: 'search',
                params: { keyWord: keyWord.value }
            })

接受参数

  {{ route.params.keyWord }}

query

{
 path: '/search',
            name: 'search',
            component: () => import('@/views/Search'),
            meta: { show: true }
}

 1 router.push(`/search/?k=${keyWord.value}`)
            2 router.push({
                name: 'search',
                query: { k: keyWord.value }
            })

接受参数