Vue Router如何实现组件与路由间的解耦

在上章所讲路由传递参数的方法中，对于网站开发而言，不管是 query 传参还是param 传参，最终我们都是通过 this.$route 属性获取到参数信息，如： $route.query.name 或$route.params.name

这无疑意味着组件和路由耦合到了一块，所有需要获取参数值的地方都需要加载 Vue Router，这其实是很不应该的，因此如何实现组件与路由间的解耦呢？

对于网站建设公司来讲，在之前学习组件相关的知识时，知道可以通过组件的 props 选项来实现子组件接收父组件传递的值。而在 Vue Router 中，可以通过使用组件的 props 选项来进行组件与路由之间的解耦。下面介绍 props 三种使用情况进行解耦

1、设置 props:true 情况

总结：

props: [‘id’],

path: ‘/myRouter/:id’

this.$router.push({

path: ‘/myRouter/123’

})

在下面的示例中，在定义路由模板时，我们通过指定需要传递的参数为 props 选项中的一个数据项，之后，我们通过在定义路由规则时，指定 props 属性为 true，即可实现对于组件以及 VueRouter 之间的解耦。

结果：

说明： 这里采用 param 传参的方式进行参数传递，而在组件中 我们并没有加载 Vue Router 实例，也完成了对于路由参数的获取。 需要注意的是，该方法实现组件与路由的解耦，要求路由传参方式为 一定为 param 方式。针对定义路由规则时，指定 props 属性为 true 这一种情况， 在 Vue Router 中，我们还可以给路由规则的 props 属性定义成一 个对象或是函数。

2、设置 props 为对象情况

总结：

这里有两种方式传参，但是这里真正传过去的第一种

props: [‘id’]//存放接受传进来的参数（组件获取到的是这里的值）

props: {

id: ‘123’ //将参数传进去（组件获取到的是这里的值）

}

path: ‘/myRouter/:id’

this.$router.push({

path: ‘/myRouter/123456’//param 方式传参,随便写参数，但是必须有

})

这上面的实际获取的是123，你传参123456这里是不会接受的

结果：

说明：在将路由规则的 props 定义成对象后，此时不管路由参 数中传递是任何值，最终获取到的都是对象中的值。同时，需要注意 的是，props 中的属性值必须是静态的【写死】。

3、设置 props 为函数情况

总结：

props: [‘id’, ‘name’]

props: (route) => ({

id: route.query.id,//获取到通过路由传递的参数，这个就是动态的

name: ‘zhangsan’//这个是静态的

})

goMethod() { //该方法实现路由跳转，跳转到 myRouter

this.$router.push({

path: ‘/myRouter?id=123’

}）

}

这个只是负责跳转页面顺便传参将id的值传过去，上面的name和这里的id传的方法是不一样的。

在对象模式中，我们只能接收静态的 props 属性值，而当我们使用函数模式之后，就可以对静态值做数据的进一步加工或者是与路由传参的值进行结合。