vue使用路由进行页面跳转时传递参数

本文主要介绍了vue中使用路由进行页面的跳转时,vue的路由如何传递参数,第二个页面如何获取参数.

一. 通过router-link进行跳转

<router-link
:to="{
path: 'yourPath',
    params: {
    name: 'name',
        dataObj: data
},
query: {
    name: 'name',
        dataObj: data
}
}">
</router-link>

1. path -> 是要跳转的路由路径,也可以是路由文件里面配置的 name 值,两者都可以进行路由导航
2. params -> 是要传送的参数,参数可以直接key:value形式传递
3. query -> 是通过 url 来传递参数的同样是key:value形式传递

二. 通过编程导航 $router进行路由跳转

1.路径后拼接参数

通过路径后直接拼接来传递参数

getDescribe(id) {
// 直接调用$router.push 实现携带参数的跳转
        this.$router.push({
          path: `/describe/${id}`,
        })

对应路由配置
注意:此方法需要修改对应路由配置,需要在path中添加/:id来对应 $router.push 中path携带的参数。

 {
     path: '/describe/:id',
     name: 'Describe',
     component: Describe
   }

获取传递的参数值

this.$route.params.id

2. 通过params来传递参数

传递参数
通过路由属性中的name来确定匹配的路由，通过params来传递参数。

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

对应路由配置
注意这里不能使用:/id来传递参数了，因为已经使用params来携带参数了。

{
     path: '/describe',
     name: 'Describe',
     component: Describe
   }

获取参数

this.$route.params.id

3. 通过query来传递参数

传递参数
使用path来匹配路由，然后通过query来传递参数
这种情况下 query传递的参数会显示在url后面?id=？

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

对应路由配置

 {
     path: '/describe',
     name: 'Describe',
     component: Describe
   }

获取参数

this.$route.query.id

注意:此处不是$router,而是$route,没有”r”

---

更为清爽的浏览体验,请移步我的个人博客
天心天地生的个人博客

---

技能树.IT修真院
“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。
这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。快来与我一起学习吧~
凭邀请码注册可享受学费减免优惠
我的邀请码：25344308 ，或者你可以直接点击此链接：
修真院注册链接