vue地址栏传参数以及接收参数

最新推荐文章于 2025-02-08 01:45:00 发布

元正~Richarlie

最新推荐文章于 2025-02-08 01:45:00 发布

阅读量1k

点赞数

分类专栏：前端文章标签： vue.js javascript 前端

原文链接：https://blog.youkuaiyun.com/yufengaotian/article/details/81456685

版权

前端专栏收录该内容

89 篇文章

订阅专栏

在Vue开发中，除了使用a标签，还可以通过router.push方法进行页面跳转。示例包括字符串路径、对象路径、命名路由和带查询参数的跳转。例如，jumpresume函数用于传递参数到/resume页面，接收参数则在created生命周期钩子中通过this.$route.query获取。

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

编程式的导航
在用Vue开发项目中,跳转页面，除了使用创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。

// 字符串
router.push('home')
 
// 对象
router.push({ path: 'home' })
 
// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})
 
// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

例子如下：传递参数

jumpresume(id){
 
this.$router.push({path:'/resume',query:{jId:id}})
 
},

接收参数：

created(){
    let id = this.$route.query.jId;
    alert(id);
 },