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

雨点打透心脏的1/2处 2023-03-01 09:08 19阅读 0赞

##### 先来个大总结 #####

###### 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()">返回 <</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>

![在这里插入图片描述][20200723141838866.png] ![在这里插入图片描述][20200723142046104.png]

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

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

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

![在这里插入图片描述][20200723143008193.png] ![在这里插入图片描述][20200723143018558.png]

##### 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>

![在这里插入图片描述][20200723155605483.png] ![在这里插入图片描述][20200723155619696.png]

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

修改 group.vue-----

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70] ![在这里插入图片描述][20200723154752644.png]

##### 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>

![在这里插入图片描述][20200723164241689.png]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 1]

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

group.vue-----

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

![在这里插入图片描述][20200723165403959.png]![在这里插入图片描述][20200723165450271.png]

##### 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方式

![在这里插入图片描述][20200723163327489.png]![在这里插入图片描述][20200723163342138.png]

##### 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>

![在这里插入图片描述][20200723165015348.png]![在这里插入图片描述][20200723165032610.png]

##### 我发现了一个道理 #####

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

[20200723141838866.png]: https://img-blog.csdnimg.cn/20200723141838866.png
[20200723142046104.png]: /images/20230209/5f5b85d8696e48159137424a904c555e.png
[20200723143008193.png]: https://img-blog.csdnimg.cn/20200723143008193.png
[20200723143018558.png]: /images/20230209/dd4add981c0d4088afdd47de548649bb.png
[20200723155605483.png]: https://img-blog.csdnimg.cn/20200723155605483.png
[20200723155619696.png]: https://img-blog.csdnimg.cn/20200723155619696.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200723154621944.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ==,size_16,color_FFFFFF,t_70
[20200723154752644.png]: https://img-blog.csdnimg.cn/20200723154752644.png
[20200723164241689.png]: https://img-blog.csdnimg.cn/20200723164241689.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200723164252441.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ==,size_16,color_FFFFFF,t_70
[20200723165403959.png]: https://img-blog.csdnimg.cn/20200723165403959.png
[20200723165450271.png]: https://img-blog.csdnimg.cn/20200723165450271.png
[20200723163327489.png]: https://img-blog.csdnimg.cn/20200723163327489.png
[20200723163342138.png]: https://img-blog.csdnimg.cn/20200723163342138.png
[20200723165015348.png]: https://img-blog.csdnimg.cn/20200723165015348.png
[20200723165032610.png]: https://img-blog.csdnimg.cn/20200723165032610.png