Vue Router
Vue Router 是 Vue.js 的官方插件，用来快速实现单页应用。
单页应用
- SPA（Single Page Application）单页面应用程序，简称单页应用。
- 指的是网站的 “所有” 功能都在单个页面中进行呈现。
- 具有代表性的有后台管理系统、移动端、小程序等。
- 优点：
- 前后端分离开发，提高了开发效率。
- 业务场景切换时，局部更新结构。
- 用户体验好，更加接近本地应用。
- 缺点：
- 不利于 SEO。
- 初次首屏加载速度较慢。
- 页面复杂度比较高。
前端路由
- 前端路由，指的是 URL 与内容间的映射关系
- URL、内容、映射关系。
Hash 方式
通过 hashchange 事件监听 hash 变化，并进行网页内容更新。
封装以备复用。
window中的this指向window，需要将外部的this存储起来
- 特点总结：
- Hash 方式兼容性好。
- 地址中具有 #，不太美观。
- 前进后退功能较为繁琐。
History方式
History 方式采用 HTML5 提供的新功能实现前端路由。
在操作时需要通过 history.pushState() 变更 URL并执行对应操作。
前进后退功能，首先需要在更改 url 时保存路由标记。
通过 popstate 事件监听前进后退按钮操作，并检测 state。
调用初始化方法监听前进后退操作并处理。
Vue Router
是 Vue.js 官方的路由管理器，让构建单页面应用变得易如反掌。
基本使用
- 直接下载 / CDN
- 最新版本：unpkg.com/vue-router/…
- 指定版本：unpkg.com/vue-router@…
- npm
- npm install vue-router
- Vue Router 提供了用于进行路由设置的组件
<router-link>与<router-view>。
- 定义路由中需要的组件，并进行路由规则设置。
- 创建 Vue Router 实例，通过 routes 属性配置路由。
- 创建 Vue 实例，通过 router 属性注入路由。
命名视图
如果导航后，希望同时在同级展示多个视图（组件），这时就需要进行命名视图。
路由中通过 components 属性进行设置不同视图的对应组件。
动态路由
当我们需要将某一类 URL 都映射到同一个组件，就需要使用动态路由。
- 定义路由规则时，将路径中的某个部分使用
:进行标记，即可设置为动态路由
- 设置为动态路由后，动态部分为任意内容均跳转到同一组件。
- : 部分对应的信息称为路径参数，存储在 vm.$route.params 中。
侦听路由参数
- 动态创建组件是复用而不是重建，所以生命周期只执行一次
- 如果要响应路由的参数变化，可以通过 watch 监听 $route。
路由传参处理
这里通过路由的 props 设置数据，并通过组件 props 接收。实现组件与路由的解耦
包含多个命名视图时，需要将路由的 props 设置为对象。
如果希望设置静态数据，可将 props 中的某个组件对应的选项设 置为对象，内部属性会绑定给组件的 props。
嵌套路由
实际场景中，路由通常由多层嵌套的组件组合而成，这时需要使用嵌套路由配置。
使用 children 来进行嵌套路由中的子路由设置。
编程式导航
编程式导航，指的是通过方法设置导航。
router.push() 用来导航到一个新 URL。
<router-link> 的 to 属性使用绑定方式时也可属性对象结构。声明式导航
命名路由
设置路由时添加 name 属性。
在 push() 中通过 name 导航到对应路由，参数通过 params 设置。
也可以在 <router-link> 中使用。
其他功能
重定向 redirect
别名 alias
导航守卫
- to: Route: 即将要进入的目标 路由对象
- from: Route: 当前导航正要离开的路由
- next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
- next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed （确认的）。
- next(false): 中断当前的导航。如果浏览器的 URL 改变了（可能是用户手动或者浏览器后退按钮），那么 URL 地址会重置到 from 路由对应的地址。
- next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。
- next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。
History 模式
需要通过 Vue Router 实例的 mode 选项来设置，这样 URL 会更加美观，但同样需要后端支持避免问题。
