Vue路由传参与props解耦详解

文章目录

关于路由传参的几种方式，众说纷纭。今天来总结下路由传参的几种方式与路由解耦：

一、路由传参

路由传参总的来说有两种方式，query和params，配合声明式导航与编程式导航，各有不同的几种写法；

1.query传参

1.1 query配合声明式导航：

//路由配置{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>

1.2 query配合编程式导航：

路由配置方式不变；

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

query传参的特点：
1.参数在url中展现，使用？分割。属性和值以键值对形式存在
2.子组件通过$route.query.xxx方式获取参数（xxx为自己定义的参数名）

2.params传参

params传参分为两种情况，路径占位与不占位

2.1路径使用参数占位时：

2.1.1 params配合声明式导航：

//路由声明需要使用‘：’占位{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>

2.1.2 params配合编程式导航：
和传对象方式基本一样，不再赘述；

params传参配合路径占位的特点：
1.参数在url中展现，没有？=等额外标签
2.子组件以$route.params.xxx方式获取参数（xxx为自己定义的参数名）

2.2 路径不使用占位时：

2.2.1 声明式导航

无法使用，声明式导航需要使用路径，路由路径不适用参数占位时，path会忽略params，故无法传参；

官网解释如下：

注意：如果提供了 path，params 会被忽略，你需要提供路由的 name 或手写完整的带有参数的 path

2.2.2 编程式导航

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

params传参占位的特点：
1.参数在不在url体现
2.刷新后数据丢失

二、props解耦

vue的组件是可以复用的，但是路由给子组件传值后，通过$route获取参数会导致子组件无法复用，解决这个问题，需要用到props解耦；

1.props布尔值

具体使用：
1.在路由配置时使用props

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

2.父组件传参，没有变化
3.子组件使用props接收

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

props为布尔值 true 开启props接收，false关闭。
上例我们演示的就是这样的情况，但是，props为布尔值时，只适用于params传参，对query不适用；

2.props函数模式

props配置为函数，可以获取query方式的传值，通过route.query.xxx方式

//配置{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>exportdefault{props:{data:{type: String,},},};</script>

3.props对象模式

props对象模式直接传递固定值，不需要再传参；

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

以上，为本次分享全部内容，如有错误，欢迎随时私信指正，不胜感激。