路由传参的三种方式

params传参

BUG：这种方式会造成页面刷新参数丢失。

参数传递页面

1
2
3
4
5
6
7
// 点击跳转详情页面
toDetail(){
   this.$router.push({
        name:"AntMemu",//值是在配置路由规则时给路由的命名，相当于别名
        params:{menu:this.leftMenu}//传递过去的参数
   })
}

路由规则代码

1
2
3
4
5
6
{
    path: '/AntMemu',
    name: 'AntMemu',//命名路由
    component: AntMemu,
    props:true//子组件开启props传参
}

参数获取和使用

子组件获取通过路由传递过来的参数，这样获取到的参数，相当于data中的数据，参照data数据的使用即可：

1
props:['menu'],

注意：通过props接受传递的参数前提是在配置路由规则时开启了props传参，为true即为开启，默认false。如果不开启props传参，可以通过下面的方式获取

1
menu:this.$route.params.menu   //写在data函数中即可

注意：如果push函数的参数是一个对象形式的话，对象当中如果配置了path属性，那么是不能再配置params属性的，具体可看官方文档说明

在这里插入图片描述

路由属性配置传参

参数传递页面代码

1
2
3
4
5
toDetail(){
    this.$router.push({
        path:`/AntMemu/${this.id}`,//值是在配置路由规则时给路由的命名，相当于别名
    })
}

路由配置规则

1
2
3
4
5
{
    path: '/AntMemu/:id',
    name: 'AntMemu',//命名路由
    component: AntMemu,
},

这里我用的是ES6的模板字符串方式，可以直接读取参数，也可以使用普通字符串拼接的方式。

参数的接收(此种方式不支持props传参)

1
id:this.$route.params.id

query传参

这种方式页面在刷新时不丢失参数。

参数传递页面

1
2
3
4
this.$router.push({
    name:"AntMemu",//值是在配置路由规则时给路由的命名，相当于别名
 	query:{id:this.id}
})

路由规则配置页面：

1
2
3
4
5
{
    path: '/AntMemu',
    name: 'AntMemu',//命名路由
    component: AntMemu,
},

参数获取(此种方式不支持props传参)

1
id:this.$route.query.id

路由属性 与 query传递方式的区别

区别一
首先就是地址栏的区别，第一种方式参数传递的参数不会在地址栏出现，同时支持两种参数接受方式，但是后两种参数会出现在地址栏中，仅支持使用挂载在vue实例身上的route对象来获取参数。

区别二
再者就是参数的丢失问题，第一种传参方式在页面刷新之后，参数会丢失，但是后两种方式不存在页面刷新参数丢失的情况。