vue路由
vuex 公共状态管理 不经常更新的数据做缓存
重点概念:
SPA:单页面应用
一个页面:控制各组件的显示/隐藏,渲染/销毁
MPA:每次跳转多页面应用,每次跳转跳一个新的页面
js动态绑定的客户端渲染的,都不利于seo搜索引擎优化
路由机制
hash路由
原理:每次路由切换,改变页面的hash值
- hashchange,页面不会刷新,但是事件会触发;
- 从路由表中匹配相应的路由组件渲染
原生js实现:
获取当前hash->从路由表中匹配当前路由组件->把指定组件放到容器中渲染
代码里location.href
history路由
利用history api
history.pushState()
history.go()
匹配 location.pathname
页面只有一个
需要服务器支持**
因为改history改的是页面地址;改hash值不一样只是改hash值,没改页面地址
vue-router
vue-router路由配置
路由切换方式
路由表渲染
路由容器中渲染
路由切换:编程式导航
路由进阶内容:
具体配置项:
routes:路由表,路由表会单独一个文件
路由的定义:
每个路由对象的定义:
创建router实例并创建路由表
根组件实例对象上有router配置
vue-router整体流程
router-view
路由容器:把匹配的路由组件进行渲染
router-link路由切换
路由怎么匹配怎么渲染的机制已经实现了我们用router-link router-view,用指定跳转指定渲染
创建路由管理机制和路由表
原来组件会触发销毁钩子,最新匹配的会触发第一次渲染钩子
如何匹配如何监听什么时候触发就行
重点:跳转方式,传参方案
路由加载 导航守卫
路由跳转
router-view&router-link
router-link:to 可以是一个对象。query params
$router & $route
一级&二级路由
路由创建不同的组件
两个页面完全不一样:一级路由
有共同的地方,某个区域不一样:二级路由
结构样式功能都不一样,就做成路由组件
结构样式功能类似,没必要做成路由
手机二级路由比较少:本来就屏幕小,上面一定有一部分是固定的
路由优化之懒加载*
路由懒加载技术方案:
只把第一次渲染需要加载的组件打包到主js,其余的打包到相关js中。打包的时候分割打包
第一次主js从服务器获取,路由切换的时候再动态加载相应的js。
已经实现了路由懒加载机制,只需要开启
- ()=>import('@/views/app.vue')
- 加上注释webpackChunkName:views
只要使用了import,vue-cli会单独打包到一个单独的js中
路由的导航守卫函数*
路由切换:即将失活的组件 -> 即将激活的组件
打算开始跳转到跳转结束,js动态加载完成,组件已经渲染出来至少是开始渲染。
vue-router中提供了一套完整的跳转阶段中的钩子函数,即路由守卫函数。
next函数
tip:因为此时组件还没创建拿不到组件实例做不了什么
先确认导航的一套流程,再处理组件的创建和销毁
- next()正常下一步
- next(false)和不写一样中断
- next(新路径)会从头开始走一遍新的导航确认流程
loading效果:
beforeEach中显示loading;afterEach中关闭loading