vue路由

vue路由

vuex 公共状态管理 不经常更新的数据做缓存

重点概念：

SPA：单页面应用

一个页面：控制各组件的显示/隐藏，渲染/销毁

MPA：每次跳转多页面应用，每次跳转跳一个新的页面

js动态绑定的客户端渲染的，都不利于seo搜索引擎优化

路由机制

hash路由

原理：每次路由切换，改变页面的hash值

1. hashchange，页面不会刷新，但是事件会触发；
2. 从路由表中匹配相应的路由组件渲染

原生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。

已经实现了路由懒加载机制，只需要开启

1. ()=>import('@/views/app.vue')
2. 加上注释webpackChunkName:views

只要使用了import，vue-cli会单独打包到一个单独的js中

路由的导航守卫函数*

路由切换：即将失活的组件 -> 即将激活的组件

打算开始跳转到跳转结束，js动态加载完成，组件已经渲染出来至少是开始渲染。

vue-router中提供了一套完整的跳转阶段中的钩子函数，即路由守卫函数。

next函数

tip:因为此时组件还没创建拿不到组件实例做不了什么

先确认导航的一套流程，再处理组件的创建和销毁

1. next()正常下一步
2. next(false)和不写一样中断
3. next(新路径)会从头开始走一遍新的导航确认流程

loading效果：

beforeEach中显示loading；afterEach中关闭loading