vue-router的两种参数传递方式：params和query

一.vue-router参数传递

1.传递参数的方式

传递参数主要有两种类型：params和query

params的类型：

• 传一个值时，用params
• 配置路由格式：/router/:id (与之前的动态路由相似）
• 传递的方式：在path后面跟上对应的值
• 传递后形成的路径：/router/123，/router/abc

query的类型

• 如果传入数据较多时，用query，因为query传入的是一个对象

• 配置路由格式：/router，也就是普通配置

• 传递的方式：对象中使用query的key作为传递方式

• 传递后形成的路径：/router?id=123,/router?id=abc

query的用法：
1.先创建路由组件Profile.vue
2.在index.js中建立路由和组件的映射关系
3.在App.vue中将新的router-link写入

<router-link :to="{path:'/profile',query={name:'why',age=18,height=1.88}}">档案</router-link>
//params和query中都是用v-bind指令

4.在Profile.vue文件内

<template>
<div>
	<h2>我是profile组件</h2>
	<h2>{{$route.query.name}}</h2>
	<h2>{{$route.query.age}}</h2>
	<h2>{{$route.query.height}}</h2>
</div>
</template>

使用js代码实现上述两种传参：