05-快速上手vue-router
这是我学习vue的整理笔记。是我对各个视频和文档的综合理解，以备我日后复习存储。如果有错误的地方，还请各位大佬多多赐教。
快速上手vue-router
- 一、vue-router核心原理-前端路由
-
- 1.1、什么是前端路由？
- 1.2、前端路由的两种模式
-
- 1.2.1、URL的hash
- 1.2.2、HTML5的history模式（推荐）
- 1.2.3、两种模式比较
- 二、安装和使用vue-router
-
- 2.1、安装vue-router并创建实例
- 2.2、使用vue-router
-
- 第一步: 创建路由组件
- 第二步: 配置路由映射: 组件和路径映射关系（包含懒加载模式）
- 第三步: 使用路由
-
- a、 通过``router-link``和``router-view``标签使用路由
-
- 标签基础使用
- ``router-link``其他属性
- b、通过JavaScript代码使用路由
- 三、导航守卫---监听路由的改变
- 四、路由嵌套以及实际应用
- 4.1、实际案例以及其编写
-
- 4.2 重定向解决默认显示路径
一、vue-router核心原理-前端路由
1.1、什么是前端路由？
1、说起路由，我们大多数都会想到家里的路由器，如下：
2、网络工程专业来说，路由就是路由和转送 ：
- 路由：是决定数据包从来源到目的地的路径
- 转送：将输入端的数据转移到合适的输出端
3、但是对于我们写代码的来说，我觉得可以简单的理解为url（统一资源定位），如下：
路由中有一个非常重要的概念叫路由表。路由表本质上就是一个映射表, 决定了数据包的指向，也就是我们页面跳转的路径。
我们所谓的前端路由也就是操作url
前端路由核心：改变URL，但是页面不进行整体的刷新。
前端路由被广泛应用于SPA页面，如下。详情点击。
1.2、前端路由的两种模式
1.2.1、URL的hash
hash属性是一个可读可写的字符串，该字符串是 URL 的锚部分（从 # 号开始的部分）,在页面中的hash有多种功能意义:
-
hash虽然出现在url中，但不会被包括在http请求中，它是用来指导浏览器动作的，对服务器端完全无用，因此，改变hash不会重新加载页面。
-
可以为hash的改变添加监听事件
window.addEventListener("hashchange",funcRef,false) -
每一次改变hash，都会在浏览器访问历史中增加一个记录
其原理如下
1.2.2、HTML5的history模式（推荐）
History interface是浏览器历史记录栈提供的接口，通过back() forward() go()等方法，我们可以读取浏览器历史记录栈的信息，进行各种跳转操作。
从HTML5开始，History interface提供了2个新的方法：pushState() replaceState()使得我们可以对浏览器历史记录栈进行修改：
- 参数一：stateObject当浏览器跳转到新的状态时，将触发popState事件，该事件将携带这个stateObject参数的副本
- 参数二：title所添加记录的标题
- 参数三：url所添加记录的url
其原理如下
1.2.3、两种模式比较
一般的需求场景中，hash模式与history模式是差不多的，根据MDN的介绍，调用history.pushState()相比于直接修改hash主要有以下优势：
1. pushState设置的新url可以是与当前url同源的任意url,而hash只可修改#后面的部分，故只可设置与当前同文档的url
2. pushState设置的新url可以与当前url一模一样，这样也会把记录添加到栈中，而hash设置的新值必须与原来不一样才会触发记录添加到栈中
3. pushState通过stateObject可以添加任意类型的数据记录中，而hash只可添加短字符串pushState可额外设置title属性供后续使用
二、安装和使用vue-router
2.1、安装vue-router并创建实例
我们可以使用命令行npm install vue-router --save去创建，也可以使用vue-cli去创建。在这里我用了vue脚手架的方式去创建了一个带vue-router插件的项目，如下，不会脚手架的请点击
2.2、使用vue-router
步骤如下:
第一步: 创建路由组件
第二步: 配置路由映射: 组件和路径映射关系（包含懒加载模式）
除此之外，还有以下3中赖加载模式的代码：
-
方式一: 结合Vue的异步组件和Webpack的代码分析
-
方式二: AMD写法
-
方式三: 在ES6中, 我们可以有更加简单的写法来组织Vue异步组件和Webpack的代码分割（推荐）
第三步: 使用路由
a、 通过router-link和router-view标签使用路由
标签基础使用
标签。该标签会根据当前的路径, 动态渲染出不同的组件。
在路由切换时, 切换的是
加粗样式
router-link其他属性
tag：tag可以指定之后渲染成什么组件, 比如上面的代码会被渲染成一个元素, 而不是。
replace：replace不会留下history记录, 所以指定replace的情况下, 后退键返回不能返回到上一个页面中。
active-class: 当router-link-active的clas, 设置active-class可以修改默认的名称。
b、通过JavaScript代码使用路由
三、导航守卫—监听路由的改变
vue-router提供了beforeEach和afterEach的钩子函数, 它们会在路由即将改变前和改变后触发，这里是全局使用，局部以及更多请点击。
beforeEach参数含义：
to: 即将要进入的目标的路由对象.from: 当前导航即将要离开的路由对象.next: 调用该方法后, 才能进入下一个钩子.
四、路由嵌套以及实际应用
4.1、实际案例以及其编写
案例：在home页面中, 我们希望通过/home/news和/home/message访问一些内容。
4.2 重定向解决默认显示路径
我们可以给router->index.js中的home的子组件加上路由的默认路径，使用redirect(),如下
