vue-router中传递参数query和params的区别

query和params的相同之处

在vue-router的使用中$router.params和$router.query都可以传递父组件传递的动态参数这是最基本的

query和params的不相同之处

params获取(简易流程及方法)     文件目录

 

父元素页面App.vue(home,和about可以忽略)

<template>
	<div id="app">

		<router-link to="/home">home</router-link>
		<br />
		<router-link to="/about">about</router-link>
		<br />
		<router-link :to="'/user/'+userid">user</router-link>
		<router-link :to="{path:'/profile',query:{name:'why',age: 18,height:1.88}}">档案</router-link>
		<router-view></router-view>
	</div>

</template>

<script>
	export default {
		name: 'App',
      data(){
      	return {
      		userid:'zhangsan',
      		profile:'/profile'
      	}
      }
	}
</script>

<style>

</style>

当如上图的父元素想传递数据到两个子元素时，params获取的数据跟随在地址的后面

如上图<router-link :to="'/user/'+userid">user</router-link>

然后再更改router文件下index的参数配置

修改rounter下index文件传递地址的参数(注意！这里的参数就是user.vue中获取参数的参数一样)

​
import VueRouter from 'vue-router'
import Vue from 'vue'
const user =()=>import('../components/user')
const profile =()=>import('../components/profile')

/*懒加载加快用户请求速率*/

//1.通过Vue。use（插件），安装插件

Vue.use(VueRouter)
//2.创建VueRounter对象
const routes = [
	{
		path: '/user/:id',
		component: user
	},
	{
		path: '/profile',
		component: profile
	}
]

const router = new VueRouter({
	routes,
	mode: 'history',
	linkActiveClass: 'active'
})
//3.将rounter对象传入到VUE 实例中
export default router

​

 在user.vue的子组件中获取父组件传递的参数

<template>
	<div>
		<h2>我说user组件啊哈哈哈</h2>
		<p>我是用户的相关信息，嘿嘿嘿</p>
		<!---->
		<h2>{{userId}}</h2>
		<h2>{{$route.params.id}}</h2>
	</div>

</template>

<script>
  export default {
		name: "user",
		computed: {
			userId() {
				return this.$route.params.id
			}
		}
	}
</script>

<style>

</style>

然后 npm run dev ,

binggo,很棒

使用query传递参数

父元素中见第一张图

<router-link :to="{path:'/profile',query:{name:'why',age: 18,height:1.88}}">档案</router-link>

query无需再配置router中index的文件直接到子组件profile中

(其父)

 (其子)

 

npm run dev!

 

 总结一下

params和query相比较虽然都是传递参数的但是个人感觉query更加的方便，因为使用params还需要重新配置router的文件，想我这种懒蛋十分拒绝QAQ！