vue 获取url地址的参数_vue-router 基础：3种路由参数传递的示例

前言

《vue 基础》系列是再次回炉 vue 记的笔记，除了官网那部分知识点外，还会加入自己的一些理解。(里面会有部分和官网相同的文案，有经验的同学择感兴趣的阅读)

参数传递

经常会通过路由参数来完成特定的需求。如下示范几个路由参数传递的方式。

---

query 参数

第一个就是如何获取 url 问号后面的参数，query 就是描述这块参数的“专用单词”。

组件

---

path 参数

基于 Restful 规范，我们会设置动态路由(但整个地址的含义是一样的)，这样就会有获取地址上的动态参数的需求。

那怎么方便的获取其中的变量呢？vue-router 也给我准备好了相关 api ，功能是通过 path-to-regexp 这个模块完成。

path 属性定义了一个动态路由，以冒号 :pathParam 表示：

路由

组件

---

props 参数

上面的示例都涉及 this.$route ，这样使得路由模块和组件的耦合度较高。vue-router 中可以设置 props 属性来注入到 component 中的对应的 props 属性。

这样我们的组件代码会是这样：

组件

路由中，特殊指定 props ：

路由

总结

都是很常用的 vue-router 参数传递的例子。其中前两者相信各位用的会多，最后中 props 用的比较生僻，我是这次学习才知道官方文档有这样的用法。希望能对大家有帮助。

---

关于我

一位“前端工程师”，乐于实践，并分享前端开发经验。

如果有问题或者想法，欢迎各位评论留言，愿大家共同进步。

关注【前端雨爸】，查阅更多前端技术心得。