先来个大总结
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.keythis.$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.keythis.$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传值相对安全一些。

Logo

前往低代码交流专区

更多推荐