vue路由通过props传参

方式一：布尔模式

方法一：直接传参

路由配置：

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

页面 A

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

页面 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：

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

页面 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>