vue路由跳转传递参数，query和params方式传递

vue路由跳转( router-link的to属性，或者this.$router.push()方法 ) 传递参数有两种方式：query和params。

一、query传参：

1.可以传递多个参数：  域名/list?name=aaa&pass=bbb

2.不需要另外配置路由

二、params传参：

1.只能传递一个参数:  域名/list/3

2.需要配置路由

 

代码实现：

一、query方式：

1.配置跳转路径：

方法一：router-link的to属性：

      <router-link :to="{name:'/home',query:{username:'zhangsan',password:'123456'}}"></router-link>

方法二：this.$router.push()方法：

this.$router.push({
        path:'/home',
        query:{
          username:'zhangsan',
          password:'123456'
        }
      })

2.跳转后的组件接收参数：（可以在mounted函数中获取）

     const n = this.$route.query.username
     const p = this.$route.query.password

 

二、params方式：

1.配置跳转路径：

方法一：router-link的to属性：

<router-link :to="'/home'+goods_id"></router-link>
<!-- goods_id是data中的一个变量 -->

方法二：this.$router.push()方法：

this.$router.push('/home/'+goods_id)

2.配置路由规则：

{path:'/home/:id',component:Home} //id是自定义的一个变量，用于后面接收参数

3.跳转后的组件接收参数：（可以在mounted函数中获取）

const id = this.$route.params.id

 

附：vue路由官网