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.