Vue之vue-router的编程式导航

本文介绍了Vue项目中使用vue-router进行编程式导航的方法,并详细解释了如何通过router.push()跳转路由并传递参数,同时展示了如何在目标组件中正确获取这些参数。

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

vue之vue-router的编程式导航

这几天在做一个项目,遇到一个问题:
编程式导航router.push(location)

下面跳转到路由home,并传递了参数,想要获取参数信息,这里path属性可选,但是无name属性就无法获取params内容

this.$router.push({
    path: '/home',
    name: '/HomeView'
    params: {
        userId: 1,
        userName: 'zhangsan'
    }
})

使用上面编程式导航,也需要现在路由配置文件中声明

export default new Router({
  routes: [
    {
      path: '/',
      name: 'LoginView',
      component: LoginView
    },
    {
      path: '/home',
      name: 'HomeView',
      component: HomeView
    }
  ]
})

获取参数通过路由信息对象route获取

this.$route.params
this.$route.params.userId
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值