vue之动态路由传参 附有源码!!!-前端-阿习进阶博客
Java
MySQL
大数据
Python
前端
黑科技
    首页 >> 互联网 >> 前端

vue之动态路由传参 附有源码!!!

[导读]:1.直接调用$router.push 实现携带参数的跳转 看准符号this.$router.push({path:`/home/${id}`,})需要对应路由配置如下:{path:'/home/:id',name:'...

1.直接调用$router.push 实现携带参数的跳转 看准符号

  this.$router.push({
      path: `/home/${id}`,
  })

需要对应路由配置如下:

 {
     path: '/home/:id',
     name: 'Home',
     component: Home
   }

//获取参数方法

this.$route.params.id
this.$router.push({
  name: 'home',
  params: {
   id: id
  }
})

路由配置:

这里可以添加:/id 也可以不添加,不添加数据会在url后面显示,不添加数据就不会显示

  {
     path: '/home',
     name: 'Home',
     component: Home
   }

获取参数

this.$route.params.id

//query传递的参数会显示在url后面?id=?

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

对应路由配置:

 {
     path: '/home',
     name: 'Home',
     component: Home
   }

//获取参数

this.$route.query.id

注意:

在子组件中 获取参数的时候是$route.params 而不是$router

image.png 


本文来自阿习进阶博客,如若转载,请注明出处:http://yanxias.com

留言区

联系人:
手   机:
内   容:
验证码:

历史留言

联系人:阿习

手机号:156****7890

留言内容:欢迎大家一起讨论文章,有喜欢发帖的可以私聊我给你开权限,发文章

留言时间:2022-05-09 17:46:15

回复内容:互联网阿习

回复时间:2022-05-09 17:46:15

用户IP:220.***.***.232

用户操作系统:Windows 10

欢迎加Easy的QQ