Vue.JS快速上手（Vue-router 实现SPA 开发）

一、什么是路由

URL -> 映射 -> 组件

Hash+onhashchange

History.pushstate+replaceState+onpopstate

二、准备工作

组件

router-link: 导航，最终默认情况生成a标签

router-view:组件容器，占位符(插座), 相当于之前.container的div

对象

routes: 路由表, 配置url与组件间的关系集合

router: 路由对象， 存储路由相关信息，并可以操作路由切换

三、使用vue-router 开发SPA 基本步骤

第1步：安装vue-router

第2步：导入路由模块

第3步：配置路由表

第4步：创建路由对象

第5步：注入路由对象

 

第6步：导航(静态与动态)

第7步：添加路由插座(router-view)

 四、使用路由实现组件间数据传递

1.查询字符串

2.路由参数

五、路由嵌套 

 六、路由守卫

1 什么是守卫

路由切换时，控制组件加载前或离开后的行为, 如：组件访问前的权限，统计组件停留的时间(前、后),

2 守卫类型

触发时机：前守卫与后守卫

作用域：

全局守卫: 控制任何路由切换

独立守卫：控制针对特定路由切换

组件守卫：专门控制特定组件

 

 七、路由懒加载