Vue 路由
路由的模式
- 历史模式history (可以使#不出现)
- hash（#）
路由相关标签
- router-view 组件展示的区域
- router-link 跳路由 to属性->去到哪个路径
- (class) router-link-exact-active 当路由到哪里时，该类名就添加到对应的路由标签上
- (class) router-link-active 激活路径包含这个路径 (激活子路由，跟路由也带上)
路由配置属性值
- path 路由路径
- redirect 重定向 (function or string)
- component Vue组件
- beforeEnter 路由独享守卫 (function)
分
-
全局守卫
- beforeEach
- beforeResolve
- afterEach
-
路由独享守卫
- beforeEnter
-
组件内守卫
- beforeRouteLeave
- beforeRouteEnter
- beforeRouteUpdate mounted
-
动态路由
- /abc/:id
- this.$route.params.xxx => push({paht:”, params:{id: ”}}) => url 无参数
- this.$route.query.xxx => push({path:”, query:{id:”}}) => url get参数
路由解析流程
- 导航被触发
- 在失活的组件里调用离开守卫
- 调用全局的 beforeEach 守卫
- 在重用组件里调用 beforeRouteUpdate 守卫(2.2+)
- 在路由配置里调用 beforeEnter
- 解析异步路由组件。
- 在被激活的组件里调用 beforeRouteEnter
- 调用全局的 beforeResolve 守卫 (2.5+)
- 导航被确认。
- 调用全局的 afterEach 钩子
- 触发 DOM 更新
- 用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数
