前言
《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 用的比较生僻,我是这次学习才知道官方文档有这样的用法。希望能对大家有帮助。
关于我
一位“前端工程师”,乐于实践,并分享前端开发经验。
如果有问题或者想法,欢迎各位评论留言,愿大家共同进步。
关注【前端雨爸】,查阅更多前端技术心得。