vue-router路由动态传参query和params

「已注销」

于 2020-06-22 08:23:38 发布

阅读量728

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js html5 es6 css3 javascript

本文链接：https://blog.youkuaiyun.com/can0101/article/details/106894966

本文详细介绍了在Vue项目中如何使用query和params两种方式传递参数，包括具体的代码示例和页面URL显示效果，帮助开发者更好地理解和应用路由传参。

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

//路由

{
   path: '/detail',  //这里不需要参入参数
   name: "detail",
   component: () => import('@/views/login/index.vue'
}

使用：
方法1：

<router-link :to="{ name: 'details', query: { id: 123 }}">
点击按钮
</router-link>

方法2：

<router-link :to="{ path: 'details', query: { id: 123 }}">
点击按钮
</router-link>

方法3：

this.$router.push({name:'details',query:{id:123}})

方法4：

this.$router.push({path:'details',query:{id:123}})

//路由

{
   path: '/detail/:id/',    //后面要带参数
   name: "detail",
   component: detail 
 }

使用：
方法1：

<router-link :to="{ name: 'details', params: { id: 123 }}">
点击按钮
</router-link>

方法2：

this.$router.push({name:'details',params:{id:123}})

页面url显示结果是：http://localhost:8081/#/details/123