开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第14天，点击查看活动详情
Vue 路由
在Vue应用程序中，何为路由？ 回顾：express 中也使用过路由，将浏览器的请求路径，导向到处理该请求的函数，即端点 get('/user',function(req,res){ ... })
在Vue的单页应用程序中，所有的视图（页面）都将被组件化，然后由Vue的编译构建程序，将其组合到Vue实例中。 组件： 1.定义 2.导入 3.注册 4.声明
由于应用程序涉及到视图很多，而且有动态切换的需求 动态组件：
同时，还要具有一定的管理动态视图组件切换的能力。
组件 -> 组件定位（不只是组件名称）之间的映射关系，这个定位就称为路径 http://localhost:9090/app/articlelist
为什么要使用路径与组件之间进行映射？ 因为，路径可以表达嵌套的树形结构，路径的概念为人众知。特别是在网络应用中，这个概念应用比较
对于Vue来讲，知道组件与路径之间的映射，那么就需要有一种自动机制，将组件与路径进行关联 在知道路径的情况下，可以自动注册并显示相应的组件。
这种机制就是 vue-router
向组件传递参数：
-
通过路由参数传递 路径定义：/user/:uid/post/:postid 实际路径必须符合这个模式：/user/111/post/102 下面都是错误的： /user/post /user/112/post /user/post/102 这种方式即定义了参数，同时也定义了路径的模式，具有比较严格的匹配方式
组件获得数据： route.params.postid
还可以使用组件的 props 来定义属性，从而接收路径变量传递过来的数据 (1) 配置路由的时候,props的值为 true (2) 在组件中定义与路径变量同名的prop
-
通过查询参数传递 路径定义：/user 实现路径：/user?uid=111&postid=102 /user?uid=112 /user /user?postid=102
组件中获得数据: route.query.postid 获得的属性有可能不存在，需要进行判断。
-
默认情况下。路径中带尾"/"和不带尾"/"是一样的；同时，大写不区分， (1) 局部开启 在路由中，使用 sensitive和strict属性，设置为 true，就可以实现大小写区分，以及识别尾"/"
(2) 全局开启 也可以在创建路由器实例时，添加这两个属性的配置，从而获得配的限定。
-
路由匹配：
- 路由参数
- 路由参数值的模式限。 /:id(正则表达式字符串)
- 路由参数的值个数，多值表现为路径层次结构。 /:id 可以有 *, +, ?
-
嵌套路由
- 针对的是嵌套组件。也就是说,定位嵌套在其他组件中的子组件显示。
-
编程式导航
- 在代码中调用 $router 的push或replace方法，可以实现视图的导航 这两个方法可以传入两个类型的参数 (1) 路径字符串：路由必须提前定义， (2) 路由对象：如果路由没有提前定义，
-
命名视图
- 如果页面上需要动态（通过导航）显示多个组件视图，就需要在页面上添加多个
- 如何区分这些视图？
- 可以使用router-view的name属性，并且与 路由 的componest 中的组件名称关联起来
- components属性中的组件注册名称，必须与 name 属性值对于。如查 name 属性没有，则对应于 components 中的 default 属性指定的组件
命名视图经常用于加载布局容器。即在同一个路径下，可以引入多个组件 路径 -> 组件 一对多关系
-
路由别名 路径 -> 组件 多对一关系
别名：路由的规则定义只能是一个 重定向：虽然可以对应同个组件，但是路由规则可以变化。
