vue脚手架：动态路由传参（params、query）

先来个大总结

index.js 动态路由规则参数声明：

1、params 需要声明参数

{
	path:"/getdata/:key1/:key2",
	name:"getData",
	component:()=>import("@/views/getData.vue")
}

2、query 不用设置参数

{
	path:"/getdata",
	name:"getData",
	component:()=>import("@/views/getData.vue")
}

params 传参方式：

1、声明式 传参

• 直接传参（单参&多参）： <router-link to="/getdata/data1/data"></router-link>
• 对象传参（单参&多参）： <router-link :to='{name:"GetData",params:{key1:"data1",key2:"data2"}}'></router-link>

2、编程式 传参

• 直接传参（单参&多参）：this.$router.push("/getdata/data1/data2")
• 对象传参（单参&多参）：this.$router.push({name:"",params:{key1:"data1",key2:"data2"}})

3、接收参数

• 模板页面中：$route.params.key 或 this.$route.params.key
• this实例中：this.$route.params.key

query 传参方式：

1、声明式 传参

• 直接传参（单参&多参）： <router-link :to="/getdata?key1=data1&key2=data2"></router-link>
• name 对象传参（单参&多参）： <router-link :to='{name:"GetData",query:{key1:"data1",key2:"data2"}}'></router-link>
• path对象传参（单参&多参）： <router-link :to='{path:"/getdata",query:{key1:"data1",key2:"data2"}}'></router-link>

2、编程式 传参

• 直接传参（单参&多参）： this.$router.push("/getdata?key1=data1&key2=data2")
• name 对象传参（单参&多参）： this.$router.push({name:"",query:{key1:"data1",key2:"data2"}})
• path对象传参（单参&多参）： this.$router.push({path:"",query:{key1:"data1",key2:"data2"}})

3、接收参数

• 模板页面中：$route.query.key 或 this.$route.query.key
• this实例中：this.$route.query.key

解释：GetData 代表路由名字（index.js定义的路由规则里面的name）；/getdata 代表路由路径（index.js定义的路由规则里面的path）。

例子的话，之前写过一个传递单个参数的，下面展示的都是传递多个参数的。

1、params 编程式 传递多个参数 直接传参

首先是新建两个组件，一个用来传值（group.vue），一个用来接收值（getData.vue）。
然后编辑index.js文件，注册路由规则。

index.js-----

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
  const routes = [
  {   
  	......
  	
    // path: '/getdata/:xiaoming',//params传递单个参数
    path:'/getdata/:key1/:key2',//params传递多个参数
    name: 'GetData',
    component:  ()=>import("vs/getData.vue") //路由懒加载
  },
]
const router = new VueRouter({
  mode: 'history',  //history模式，不声明，则默认hash模式
  base: process.env.BASE_URL,
  routes
})
export default router

group.vue-----

<template>
    <div class="group_box">
        <button @click="push1()">点击查看 传递过去的数据</button>
    </div>
</template>
<script>
export default {
    methods:{
        push1(){
            // this.$router.push("/getdata/data参数");//发送单个参数
            this.$router.push("/getdata/data1/data2");//发送多个参数
        }
    }
}
</script>

getData.vue-----

<template>
    <div class="group_box">
        <button @click="back()">返回 &lt;</button>
        <p>获得的数据1：{{$route.params.key1}}</p>
        <p>获得的数据2：{{$route.params.key2}}</p>
    </div>
</template>
<script>
export default {
    methods:{
        back(){
            this.$router.go(-1);//返回到上一个页面，读取历史记录，不刷新页面
        }
    },
}
</script>

2、params 声明式 传递多个参数 直接传参

修改 group.vue，将js方式的参数传递方式改成 router-link 方式。

<router-link to="/getdata/data1/data2">声明式直接传参</router-link>

3、params 编程式 传递多个参数 对象传参

group.vue-----修改一下

<template>
    <div class="group_box">
        小组------------<br><br>
        <button @click="push1()">点击查看 传递过去的数据</button>
    </div>
</template>
<script>
export default {
    methods:{
        push1(){
            this.$router.push({name:"GetData",params:{key1:"data1++",key2:"data2++"}});//发送多个参数
        }
    }
}
</script>

4、params 声明式 传递多个参数 对象传参

修改 group.vue-----

<router-link :to='{name:"GetData",params:{key1:"data1--",key2:"data2--"}}'>声明式传递多个参数--对象--传递数据</router-link>

5、query 编程式 传递多个参数 直接传参

修改 index.js，将path后面的参数删掉，因为query方式进行传参的话，是不需要设置参数的。
index.js-----

{
	path:'/getdata',//query传递参数
	name: 'GetData',
	component:  ()=>import("vs/getData.vue")
},

group.vue

//模板里面
<button @click="push1()">点击查看 传递过去的数据</button>
//js里面，点击触发click事件，执行push1方法，
this.$router.push("/getdata?key1=data111&key2=data222")

更改 getData.vue-----更改获取值的方式，改成query的方式。

<p>获得的数据1：{{$route.query.key1}}</p>
<p>获得的数据2：{{this.$route.query.key2}}</p>

6、query 声明式 传递多个参数 直接传参

group.vue-----

<router-link to="/getdata?key1=data1&key2=data2">数据发送</router-link>  

7、query 编程式 传递多个参数 对象传参

group.vue-----两种方式，一种是通过name匹配路由，另一种是通过path来匹配路由。

this.$router.push({name:"GetData",query:{key1:"++data1",key2:"++data2"}}) //路由name方式
//this.$router.push({path:"/getdata",query:{key1:"++data1",key2:"++data2"}}) //路由path方式

8、query 声明式 传递多个参数 对象传参

group.vue-----

<router-link :to='{name:"GetData",query:{key1:"**data1--",key2:"**data2--"}}'>发送数据</router-link>
//或者用path方式匹配路由
<router-link :to='{path:"/getdata",query:{key1:"@@data1",key2:"@@data2"}}'>发送数据</router-link>

我发现了一个道理

通过这些例子可以看出来：params类似于post，query更加类似于我们ajax中get传参。说的再简单一点，前者在浏览器地址栏中不显示参数，后者显示，所以params传值相对安全一些。