vue路由传参方式总结

最近在看vue-router的时候碰到的问题，路由传参总共有几种方式，区别在哪里？看了很多大佬的文章总结一下
官方文档：https://router.vuejs.org/zh/guide/essentials/passing-props.html

首先，路由如何接收参数？
通过this.router.push进行编程式跳转，router−link中的to属性进行路由切换，通过this.router.push进行编程式跳转，router-link中的to属性进行路由切换，通过this.router.push进行编程式跳转，router−link中的to属性进行路由切换，通过this.route.params/this.$route.query获取路由传递的参数。params和query都是传递参数区别在于params不会再url上显示出现，并且params参数是路由的一部分，是一定要存在的，否则无法显示视图。query则是我们通常看到的url后面跟上的？后跟的显示参数。

<template>
<div class="hello">
<label>Hello</label>
<button type="button" @click="gotoD()">
查看详细信息1
</button>
<router-link
:to="{path:'/Detail/ckmike', params:{name:'Lily'},query:{sex:'女'},props:{age:18}}"
>
查看详细信息2
</router-link>
</div>
</template>

<script>
export default {
name: 'HelloWorld',
data () {
return {

}
},
methods: {
gotoD () {
this.$router.push({path: '/Detail/ckmike', query: {sex: '男'}})
}
}
}
</script>
// 路由配置
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Detail from '@/components/Detail'

Vue.use(Router)

export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/Detail/:name',
name: 'Detail',
component: Detail,
props: {
age: 21
}
}
]
})

布尔模式
如果 props 被设置为 true，route.params 将会被设置为组件属性。

const User = {
props: ['id'],
template: '<div>User {{ id }}</div>'
}
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User, props: true },

// 对于包含命名视图的路由，你必须分别为每个命名视图添加 `props` 选项：
{
path: '/user/:id',
components: { default: User, sidebar: Sidebar },
props: { default: true, sidebar: false }
}
]
})

对象模式
如果 props 是一个对象，它会被按原样设置为组件属性。当 props 是静态的时候有用。

const router = new VueRouter({
routes: [
{
path: '/promotion/from-newsletter',
component: Promotion,
props: { newsletterPopup: false }
}
]
})

函数模式
你可以创建一个函数返回 props。这样你便可以将参数转换成另一种类型，将静态值与基于路由的值结合等等。

const router = new VueRouter({
routes: [
{
path: '/search',
component: SearchUser,
props: (route) => ({ query: route.query.q }) }
]
})

URL /search?q=vue 会将 {query: ‘vue’} 作为属性传递给 SearchUser 组件。 请尽可能保持 props 函数为无状态的，因为它只会在路由发生变化时起作用。如果你需要状态来定义 props，请使用包装组件，这样 Vue 才可以对状态变化做出反应。

接下来我们来测试一下params和query有啥区别：

<template>
<div class="hello">
<label>Hello</label>
<button type="button" @click="gotoD()">
查看详细信息1
</button>
<router-link
:to="{path:'/Detail', params:{name:'Lily', age: 18},query:{sex:'女'}, props: true}"
>
查看详细信息2
</router-link>
</div>
</template>

<script>
export default {
name: 'HelloWorld',
data () {
return {

}
},
methods: {
gotoD () {
this.$router.push({path: '/Detail', query: {sex: '男'}, params: {name: 'ckmike', age: 21}, props: true})
}
}
}
</script>
// 路由配置
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Detail from '@/components/Detail'

Vue.use(Router)

export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/Detail',
name: 'Detail',
component: Detail,
props: true
}
]
})
// 信息页面
<template>
<div class="detail">
<label>详细信息：</label>
<br>
<label>姓名:{{name}}</label>
<br>
<label>性别:{{sex}}</label>
<br>
<label>年龄:{{age}}</label>
</div>
</template>

<script>
export default {
name: 'Detail',
data () {
return {

}
},
computed: {
name () {
return this.$route.params.name
},
sex () {
return this.$route.query.sex
},
age () {
return this.$route.params.age
}
}
}
</script>

说明：使用path进行跳转时，params是不会被作为route属性传递给组件的。只有query属性会被放入组件属性中。
我们把path换成name来再看：

说明:使用name进行跳转时，params生效，被传递给组件，页面显示出信息，但是这个params的信息一旦属性页面就会丢失。query不会
params参数类似于post方式，而query则类似于get方式，一旦路由的props设置为true时，那么组件中刻意通过props拿到参数，这个就是布尔模式。
如果给props传递一个对象，那么在组件中刻意获取到路由中props的参数，一般用于静态参数，这个不管你在router-link或者router.push改变对应参数值，你获取时都是路由配置中的值。
总结：
1.params传递参数，需要使用name进行路由跳转，否则无法传递。
2.params传递参数刷新会丢失数据，/router/:id方式上的id除外
3.query显示拼接在url上，刷新不丢失，不是必须有，router/:id方式则必须有id参数，否则无法正确进入视图。
4.props也可以传递参数，但传递的只能是静态参数。