0.吐槽一手：前面看了下vue.render()&JSX,感觉到头皮发麻，得先放一边了…
1.内置组件
1.1 <router-link/>
路由入口组件
默认渲染为<a></a>,可配
1.2 <router-view/>
路由出口组件
渲染成出口组件(这波我解释了，但又好像没有解释…)
2.内置对象
2.1 route
path:'', //用于捕获的路径，必选项
name:'', //也是用于匹配路由对象的
params:{} //如果有path，params将被忽略
props:{} //路由对应组件的插槽(这里用于解除$route使用带来的耦合)
component:()=>({}), //路由对应的组件
components:{ //命名视图
default:()=>({}),
componentA:()=>({}),
componentB:()=>({}),
},
children:[...route], //嵌套路由
redirect:()=>({}), //重定向，路径字符串/命名路由，导航守卫并不会被触发
alias:'' //路径别名
2.2 $route
当前所处的路由对象
2.3 router
路由器，存放/操作所有的路由
内置了一个routes[],存放所有的路由route
提供了一系列api,支持编程式导航(实现：效仿 window.history API,对history栈操作)
3. 路由捕获
支持捕获所有
支持捕获以xx前缀的路由
支持捕获正则匹配的路由
路由声明的越早，优先级越高
统一动态路径的导航，不会触发组件的生命周期 以及 除组件内更新守卫以外的导航守卫，组件将复用。
3.1 路由监听
如需响应路由的参数变化，建议监听当前路由对象
watch:{
$route(to, from) {
// ...
}
}
4.参数流转
4.1 路由间
params //可配合动态路由/:xxx ,需要考虑页面刷新时的参数丢失问题
query //有点get请求参数，以键值对形式拼接到url后面
hash //有点像浏览器的锚点
4.2 路由 & 组件
route对象的props
boolean ，true => 将route的params作为组件props
Object ,通过route.props与组件的props声明同名属性来传递参数,这对参数名静态化有一定的要求
function ，该方法可传入一个route对象作为当前路由来调用
4.3 其他环境
vuex: 基于store
浏览器：local storage、session storage 、cookie等等
5. 导航守卫
先将vue的"导航"阐释明白——
可以广义的认为 导航开始 -> 导航确认(vue官方文档提出的) -> 导航结束
导航确认？即 根据路由参数 找到了本次导航相关的 守卫钩子、路由对象、组件
因此，当导航确认被完成之后，新页面开始渲染(组件的生命钩子触发)
5.1 守卫钩子
这里就不跟随官方文档一样了，这里直接放生命钩子：
全局前置=>(组件内更新守卫,如果条件满足的话)=>路由前置=>组件创建=>全局解析=>...导航确认...=>全局后置=>组件后置=>组件离开
值得一提：导航中请求新页面的数据 或 在新页面组件的生命钩子中获取 ？
这将导致数据等待阶段停留在 旧页面 或 新页面
然后再到具体的守卫：
5.2 导航守卫
全局、路由守卫、组件内守卫
全局守卫
全局前置守卫
(to,from,next)=>{}
to、from 路由对象
next
()
(false)
('') / ({路由})
(error)
有且仅有一次,resolve当前钩子,进入管道中下一钩子
全局解析守卫
导航确认(找到导航相关的所有前置守卫、路由、组件)前,即调用
全局后置钩子
(to,from)
路由守卫
声明在router.js的route[]中
参数同全局路由
组件内守卫
创建前置路由
不能获取this,此时未创建
更新前置路由
响应路由参数的变化,其他守卫均不会响应这种变化
离开前置路由
|