vue学习笔记(二) 路由学习

vue-router与vue.js深度集成，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。一般的页面应用，是用一些超链接来实现页面切换和跳转的，比如说a标签，在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。
路由中有三个基本的概念：

1. route，它是一条路由。Home按钮=>home内容，这是一条route，about
   按钮=>about内容，这是另一条路由。
2. router是一组路由，把上面的每一条路由组合起来，形成一个数组。
   [ {home 按钮 =>home内容 }， { about按钮 => about 内容} ]
   router 是一个机制，相当于一个管理者，它来管理路由。因为routes 只是定义了一组路由，它放在哪里是静止的，当真正来了请求，怎么办？ 就是当用户点击home 按钮的时候，怎么办？这时router 就起作用了，它到routes 中去查找，去找到对应的 home 内容，所以页面中就显示了 home 内容。
3. 路由在项目中的基本定义为(文件router/index.js)：
   
   再通过来实现组件之间的跳转。
   1.1 声明式路由
   在页面中通常使用这个标签来实现页面的跳转，它属于声明式路由，相当于a标签。
   如何带值传递？
   
   用法：
   
   1.2 编程式路由
   在页面中可以使用这个标签来实现页面的跳转，还可以通过router的实例化方法来实现页面的跳转。
   1.2.1 router.push
   平时使用的实际上是调用router.push。
   具体的语法：
   router.push(location, onComplete?, onAbort?)
   在具体使用该方法时，在Vue实例内部，可以通过router来访问路由的实例，项目中常用到的有(c,d为传参方式)：
   (a)this.router.push（‘/xxxx’） – 某一个路径
   (b)this.router.push ({name : ‘xxxx’}) – 跳转到某一个页面
   ©this.router.push ({name : ‘xxxx’, query: xxx})
   (d)this.router.push ({name : ‘xxxx’, param: {userId: ‘xxxx’}}) --由于动态路由也是传递params的，所以在 this.router.push() 方法中 path不能和params一起使用，否则params将无效。需要用name来指定页面。
   3与4的区别在于在页面接收参数的方式不同：
   this.route.query.xxx
   this.route.param.xxx
   使用这个方法，它会向栈里添加一条历史记录，所以在选择回退时，它会回退到历史页面
   在项目中常见的场景是从一个单页面回退到上一层页面。
   
   1.2.2 router.replace
   语法：router.replace(location, onComplete?, onAbort?)
   这个跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是替换掉当前的 history 记录。参数的传递与router.push相同。
   (1) 路由按需加载：
   为了不影响页面加载，如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就很高效了
   我们一般定义路由：
   
   按需加载的写法：
   
   1.2.3 router-view
   在App.vue中定义 router-view和 router-link,App.vue中定义router-view是必不可少的。
   
   项目中使用的场景：
   router-view 也可看做一个组件，结合 keep-alive 来，将所有匹配到的视图组件进行缓存处理，避免重复加载。
   
   1.2.4 路由钩子
   路由钩子主要是在路由发生变化时进行一些特殊处理，总的来说，提供了三大类钩子函数：
   (1) 全局钩子
   (2) 某个路由独享的钩子
   (3) 组件内钩子
   三种路由钩子中都涉及到了三个参数：
   (1) to :Route:即将要进入的目标 路由对象
   (2) from :Route 当前导航正要离开的 路由
   (3) next : Function 一定要调用该方法来 resolve 这个钩子。
   next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed （确认的）。
   next(false): 中断当前的导航。如果浏览器的 URL 改变了（可能是用户手动或者浏览器后退按钮），那么 URL 地址会重置到 from 路由对应的地址。
   next(’/’) 或者 next({ path: ‘/’ }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。
   next(error): 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。
   参考资料：https://router.vuejs.org/zh-cn/advanced/navigation-guards.html
   (1)全局钩子：
   router. beforeEnter 与router.afterEach
   全局钩子在main.js里面调用，比如以下的场景，一个应用页面返回上一页面
   
   (2)某个路由独享的钩子
   
   这个没有用过，以后用上了再补上
   (3)组件内钩子
   组件内的钩子可以在路由组件中直接定义一下路由导航守卫。
   a)beforeRouteEnter
   b)beforeRouteUpdate (2.2 新增)
   c)beforeRouteLeave
   在项目中主要用到的是beforeRouteLeave，它的使用场景我用到最多的为：
   导航离开该组件的对应路由时，比如说从某页面进入该编辑页，当放弃编辑时，给出提示“信息未保存，是否编辑”。
   这里用到了状态管理store与vux，暂时忽略，现只看用法。