vue路由通过props传参

vue路由通过props传参

最近在学习vue router的传参，查询官网，作为小白真心有点看不懂，折腾了很久才搞懂最简单的一个方式，官网地址：https://router.vuejs.org/zh/guide/essentials/passing-props.html。

网上查了蛮多资料，终于搞明白是什么情况，总结内容如下：

非props方式传参：

方式一：使用params传参

路由配置

    {
      path: '/propstest',
      name: 'PropsTest',
      component: PropsTest,
    }

页面A

      <div>
        <router-link :to="{name:'PropsTest',params:{name:'lynn',like:'水果'}}">传参方式</router-link>
      </div>

页面B

<template>
  <div>
    <div>路由传参页面</div>
    <br />
    <div>姓名： {{ $route.params.name }}--喜欢的是： {{ $route.params.like}}</div>
  </div>

</template>

方式二：使用query传参

路由配置、页面都和params方式一直，只要将params更换为query即可。

 

props方式传参：

方式一：布尔模式

方法一：直接传参

路由配置：

{
      path: '/user/:id/:price',
      name: 'User',
      component: User,
      props: true
    }

页面A：

<div>
     <router-link :to="{name:'User', params: {'id':12320,'price':'$100'}}">传参方式布尔传值</router-link>
</div>

页面B：

<template>
    <div>
      <div>路由接收参数页面</div>
      <br />
      <div>id号：{{ id }} -- 价格：{{ price }}</div>
    </div>
</template>

<script>
    export default {
        name: "User",
      props: ['id','price']
    }
</script>

方法二：参数为对象类型

路由配置

    {
      path: '/user',
      name: 'User',
      component: User,
      props: true
    }

页面A：

<template> 
     <div>
        <router-link :to="{name:'User', params: {user}}">传参方式布尔传值</router-link>
      </div>
</template>

<script>
    export default {
        name: "*****",
      data(){
          return{
            user:{
              name: '小明',
              age: 18,
              sex: '男',
            }
          }
      },

    }
</script>

页面B：

<template>
    <div>
      <div>路由接收参数页面</div>
      <br />
      <div>用户姓名为： {{ user.name }}--年龄为：{{ user.age }}--性别为：{{ user.sex }}</div>
    </div>
</template>

<script>
    export default {
        name: "User",
      props: ['user']
    }
</script>

方式二：函数模式

方法一：直接传参

路由配置：

    {
      path: '/searchuser',
      name: 'SearchUser',
      component: SearchUser,
      props : (route) => ({
        name : route.query.name,
        age : route.query.age
      })
    }

页面A：

      <div>
        <router-link :to="{name:'SearchUser', query:{'name':'paul', 'age':20}}">传参方式函数传值</router-link>
      </div>

页面B:

<template>
    <div>
      <div>接收路由参数页面</div>
      <br />
      <div>姓名为：{{ name }} -- 年龄为：{{ age }}</div>
    </div>
</template>

<script>
    export default {
        name: "SearchUser",
      props: ['name', 'age']
    }
</script>

方法二：参数为对象类型

路由配置：

    {
      path: '/searchuser',
      name: 'SearchUser',
      component: SearchUser,
      props : route =>route.query
    }

页面A：

<template> 
     <div>
        <router-link :to="{name:'SearchUser', query:{searchUser}}">传参方式函数传值</router-link>
      </div>
</template>

<script>
    export default {
        name: "*****",
      data(){
          return{
            searchUser:{name:'张三',age:39}
          }
      },

    }
</script>

页面B：

<template>
    <div>
      <div>接收路由参数页面</div>
      <br />
      <div>姓名为：{{ searchUser.name }} -- 年龄为：{{ searchUser.age }}</div>
    </div>
</template>

<script>
    export default {
        name: "SearchUser",
      props: ['searchUser']
    }
</script>

方式三：对象模式

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

路由配置：

    {
      path: '/sidebar',
      name: 'Sidebar',
      component: Sidebar,
      props : {'name':'lynn','age':18}
    }

页面A：

<router-link :to="{name:'Sidebar'}">传参方式静态对象</router-link>

页面B：

<template>
  <div>
    <div>路由接收参数页面</div>
    <br />
    <div>Sidebar {{ name }}--{{ age }}</div>
  </div>
</template>

<script>
    export default {
        name: "Sidebar ",
      props: ['name','age'],

    }
</script>