快速上手vue-router

这是我学习vue的整理笔记。是我对各个视频和文档的综合理解，以备我日后复习存储。如果有错误的地方，还请各位大佬多多赐教。

一、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>该标签是一个vue-router中已经内置的组件, 它会被渲染成一个<a>标签。该标签会根据当前的路径, 动态渲染出不同的组件。

       在路由切换时, 切换的是<router-view>挂载的组件（相当于占位符，在哪里占位在哪里切换）, 其他内容不会发生改变。

加粗样式

router-link其他属性

       tag：tag可以指定之后渲染成什么组件, 比如上面的代码会被渲染成一个<li>元素, 而不是<a>。

       replace：replace不会留下history记录, 所以指定replace的情况下, 后退键返回不能返回到上一个页面中。

       active-class: 当<router-link>对应的路由匹配成功时, 会自动给当前元素设置一个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(),如下