Vue初学（三）

1、vue-router

常说的路由器，比如一条消息的发送，要先找到目的地的公网，进入之后，在内网中通过映射表找到指定的机器，这样才能把消息发送到正确的位置

路由器提供了两种机制: 路由和转送.

        路由是决定数据包从来源到目的地的路径.

       转送将输入端的数据转移到合适的输出端.

路由中有一个非常重要的概念叫路由表，路由表本质上就是一个映射表, 决定了数据包的指向

理解后端路由和前端路由

hash模式，location.hash('/home')    location.hash('/about')

H5的history模式：history.pushState({},'','/home')  history.pushState({},'','/about')   栈结构

history.replaceState({},'','/home') 这种的不能后退

history.back() 等价于 history.go(-1)         history.forward() 则等价于 history.go(1)

 

vue-router 使用

1、安装  npm install vue-router --save  运行时依赖   使用cli的时候，选择安装vue-router后就不用安装了

2、模块中使用

Vue.use(VueRouter)    完了再挂载上就行了

使用路由

设置路由的默认地址

两个路由，活跃的上面有个class，router-link-active，还有个exact属性，后面学到再说

动态路由

路由的懒加载

懒加载不会一次性从静态服务器取出所有的js，一次取一部分，这样提高加载速度

嵌套路由

传递参数的方式

路由里直接配的是params类型，to属性配置的是query类型

$route和$router的区别

$route获取到的是当前活跃的路由对象，可以取里面的属性

$router获取的是路由组件对象，获取的就是new VueRouter实例，是vue-router添加到vue里面的 Vue.prototype.$router

导航守卫 

写在了路由里的index.js里，首页里有嵌套路由，使用matched属性中第一个元素获取meta元数据，就不会出错，不然直接获取title首页的是undefined  

这种是全局导航守卫，还有路由独享的守卫，组件内的守卫

其他的导航守卫

https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E8%B7%AF%E7%94%B1%E7%8B%AC%E4%BA%AB%E7%9A%84%E5%AE%88%E5%8D%AB

activated 处于活跃  deactivated 不活跃

vue生命周期图

keep-alive

这个标签套在router-view里之后，所有的路径会被缓存，不会频繁的created和destoryed，可以使用include和exclude属性来决定某个组件是否被缓存，exclude="Profile,User"  用的是组件的name