Vue的路由

路由是什么

路由是一个网络工程里面的术语

路由(routing) 就是通过互联网的网络把信息从源地址传输到目的的地址活动

路由器的两种机制

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

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

路由表

路由表本质是一个映射表，决定了数据包的指向

前端渲染和后端渲染

前端渲染：浏览器中显示的网页中的大部分内容，都是由前端写的js代码在浏览器中执行，最终渲染出来的网页

前端路由:随着Ajax 的出现，有了前后端分离的开发模式

后端只是提供了API 来返回数据，前端通过Ajax 获取数据，并且可以通过JavaScript 将数据渲染到页面中

这样做最大的有点就是前后端责任的清晰，后端专注于数据上，前端专注以交互和可视化上

并且当移动端（iOS/Android ）出现后，后端不需要进行任何处理，依然使用事前的一套API 即可

目前很多网站依然采用这种模式开发

前端路由的核心是：

改变URL ，但是页面不进行整体的刷新

单页面(SPA)富应用阶段

其实SPA 最主要的特点就是在前后端分离的基础上加了一层前端路由

也就是前端来维护一套路由规则

后端渲染：早期的网页开发大部分是jsp/php开发的，这些代码的作用是从数据库中读取数据，并将它动态的放在页面中

后端路由：则是后端处理URL 和 页面之间的映射关系

后端路由的缺点：

~一种情况是整个页面的模块由后端人员编写和维护的

~另一种情况是前端开发人员如果要开发页面，需要通过PHP 和 JAVA 等语言来编写页面代码

~而且通常情况下 HTML 代码和数据以及对应的逻辑混在一起，编写和维护都是非常糟糕的事情

URL 的 hash

URL 的 hash 也就是锚点(#)，本质上是改变了window.location的href 属性

我们可以通过直接赋值 location.hash 来改变href，但是页面不发生刷新 

 认识vue-router

目前前端流行的三大框架，都有自己的路由实现

Angular的 ngRouter

React 的 ReactRouter

Vue 的 vue-router （重点）

Vue 的 vue-router ：是Vue.js 官方的路由插件，它和vue.js 是深度集成的，适合用于构建单页面应用

vue-router 是基于路由和组件的

路由用于设定走访路径，将路径和组件映射起来

在vue-router 的单页面应用中，页面的路径的改变就是组件的切换

安装vue-router 

步骤一：安装 npm install vue-router --save

步骤二：在模块化工程中使用（因为是一个插件，所以可以通过Vue.js()来安装路由功能）

~第一步：导入路由对象，并且调用 Vue.use(VueRouter）

~第二步：创建路由实例，并且传入路由映射配置

~第三部：在Vue实例中挂载创建的路由实例

使用vue-router的步骤 

第一步：创建路由组件

第二部：配置路由映射，组件和路径映射关系

第三部：使用路由 通过 和

 :该标签是一个vue-router中已经内置的组件，它会被渲染一个标签

:该标签会根据当前的路径，动态渲染出不同的组件

网页的其他内容，比如顶部的标题、导航，或者底部的一些版权信息等会和 处于同一等级

在路由切换时，切换的是挂载的组件，其他的内容不会发生改变

路由的默认路径

使路径默认跳到首页时，我们只需配置多一个映射即可

 解析：

在routes 中又配置了一个映射

path 配置的是根目录

redirect 是重定向，也就是我们将根路径重定向到/home 的路径下，这样就可以得到想要的结果

HTML5 和 History 模式 

改变路径的方法有两种：

URL 的 hash

HTML5的 history

默认情况下，路径的改变使用的 URL 的 hash

使用HTML5的 history 模式：

 router-link 的补充

1、在前面的中，只是使用了一个属性 ：to，用于指定跳转的路径

2、还有一些其他属性：

tag：tag 可以指定之后渲染成什么组件，比如上面的代码会被渲染成一个

元素，而不是

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

 active-class:当对应的路由匹配成功时，会自动给当前元素设置一个router-link-active 的 class，设置active-class 可以修改默认的名称

 

~在进行高亮显示的导航菜单或底部 tabbar 时，会使用到该类

~但是通常不会修改类的属性，会直接使用默认的 router-link-active 即可

 

路由代码转跳

页面的跳转有时候可能需要执行对应的JavaScript 代码，就需要使用第二种转跳方式

动态路由

在某些情况下，一个页面的path路径可能是不确定的，比如进入用户界面是希望是如下路径：

/users/aaa或 /users/bbb

除了前面的/user 之外，后面还跟上了用户的 ID 

这种path 和 Component 的匹配关系，我们称之为动态路由（也就是路由传递数据的一种方式）

我们可以创建一个新的vue文件

设置配置并且绑定到index中 

 

 

 路由的懒加载

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载

如何避免这种情况

如果能把不同路由对应的组件分隔成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就会更高效

就是使用路由懒加载

路由懒加载做了什么

路由懒加载的蛀牙批作业就是将路由对应的组件打包成一个个js代码块

只有在这个路由被访问到的时候，才加载对应的组件

懒加载的方式

方式一：结合Vue 的异步组件 和 Webpack 的代码分析

 const Home = resolve => {require.ensure(['../components/Home.vue'],() =>
    {resolve(require('../components/Home.vue')) })};

方式二：AMD 写法

 const About = resolve => require(['../components/About.vue'],resolve);

方式三：在ES6中，我们可以有更加简单的写法来组织Vue 异步组件和 Webpack 的代码分隔

 const Home = () => import('../components/Home.vue')

 路由的嵌套

嵌套路由是一个常见的功能

~比如在home 页面中，我们希望通过/home/news 和 /home/message 访问一些内容

~一个路径映射一个组件，访问这两个路径也会分别渲染两个组件

实现嵌套路由有两个步骤：

~创建对应的子组件，并且在路由映射中配置对应的子路由

~在组件内部使用 标签

传递参数的方式 

传递参数主要有两种类型:params 和 query

params的类型：

配置路由格式：/router/:id

传递的方式：在 path后面跟上对应的值

传递后形成的路径：/router/123,/router/abc

query 的类型 ：

配置路由格式：/router,也就是普通配置

传递的方式：对象中使用query 的 key 作为传递方式

传递后形成的路径：/router?id = 123,/router?id = abc

$route 和 $router 的区别

$router 为 VueRouter 实例，想要导航到不同的 URL ，则使用 $router.push 方法

$route 为当前 router 跳转到对象里面可以获取 name，path，query，params等

导航守卫 

什么是导航守卫：

vue-router 提供的导航守卫主要是用来监听路由的进入和离开的

vue-router 提供了 beforeEach 和 afterEach 的钩子函数，它们会在路由即将改变前 和 改变后触发

需求：在一个SPA 应用中，如何改变网页的标题

~网页的标题是通过