Vue路由传参及props解耦深入分析

//路由配置
 {
    path: '/a01',
    name: 'a01',
    component: a01
  }

//传参方式1--通过url拼接，使用?分割
 <router-link to="/a01?data=a01">a01</router-link>
 //传参方式2--传入对象
<router-link :to="{ path: '/a01', query: { data: 'a01' } }">a02</router-link>

//绑定事件
<span @click="btn('/a01', 'a01')">b01</span>
//处理路由方式1，通过path配合query
 btn(path, data) {
      this.$router.push({
        path,
        query: {
          data,
        },
      });
    },
 //处理路由方式2，通过name配合query
    btn1(name, data) {
      this.$router.push({
        name,
        query: {
          data,
        },
      });
    },

//路由声明需要使用‘：'占位
{
    path: '/a02/:data',
    name: 'a02',
    component: a02
  }

//传参方式1--url拼接，不需要？分割
<router-link to="/a02/a02">a02</router-link>
//传参方式2--传对象
<router-link :to="{ path: '/a02/a02' }">a02.1</router-link>

  btn1(name, data) {
      this.$router.push({
        name,
        params: {
          data,
        },
      });
    },

<router-link :to="{ name:'a02',params:{data:'a02'} }">a02.1</router-link>

//路由配置
{
    path: '/a03',
    name: 'a03',
    component: a03
  }
  //路由跳转
 <span @click="btn3('a03', 'a03')">b04</span>
 btn3(name, data) {
      this.$router.push({
        name,
        params: {
          data,
        },
      });
    },

{
    path: '/a02/:data',
    name: 'a02',
    component: a02,
    //使用props传参
    props: true
  }

<template>
  <p>{{ data }}</p>
</template>
<script>
export default {
  props: {
    data: {
      type: String,
    },
  },
};
</script>

//配置
 {
    path: '/a01',
    name: 'a01',
    component: a01,
    props: (route) => ({ data: route.query.data })
  }
//传参--与query一致
<router-link to="/a01?data=a01">a01</router-link>
//接收
<template>
  <p>{{ data }}</p>
</template>
<script>
export default {
  props: {
    data: {
      type: String,
    },
  },
};
</script>

//配置
 {
    path: '/a01',
    name: 'a01',
    component: a01,
    props: {data:'123'}
  }