Vue之路由传参

路由传参的三种参数形式

1. params参数
2. query参数
3. props参数

params参数传递

方式一（显示参数的方式）

①router-link组件的to属性，该参数可以是一个字符串路径，

//路由配置
{
  path: '/child/:keyword',//这里要:变量名，去充当一个占位符
  component: Child
}
//父路由组件
<router-link :to="/child/123">进入Child路由</router-link>
这里在路径中把123传递给了keyword
我们可以通过this.$route.params去查看

②通过编程式路由导航方式
this.$router.push/replace（）方法，里面的参数用对象的方式（{路由的name：或者path：‘${id}’ ）
url中可以直接使用${ 参数 }这种方式来直接传递
③query参数

<router-link :to="{name:'Child',query:{id:123}}">进入Child路由</router-link>通过this.$route.query访问参数

方式二（不显示参数）

①router-link组件的to属性，to通过别名的方式

<router-link :to="{name:'Child',params:{id:123}}">子组件中去配置路由别名

其余差距不大

props获取参数方式-共三种

props接收的只能是params参数，query参数无法接收除了函数的方式

方式一布尔值

路由配置
{
  path: '/child',
  props：true
  component: Child
}
然后在路由组件中
props:{'id','price']
页面中
<router-link :to="{name:'User', params: {'id':12320,'price':'$100'}}">传参方式布尔传值</router-link>

方式二对象方式

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

路由配置
{
  path: '/child',
  props：{'a':1,'b':2}
  component: Child
}

方式三函数方式

路由配置
{
  path: '/child',
  props：$route=>{ 
  		name : route.params.name,
        age : route.query.age}
  component: Child
}