Vue -- vue-router(路由)基本配置

---

一、路由的概述

1.1 路由是什么？

路由是一个网路工程术语;路由（routing）是指分组从源到目的地时，决定端到端路径的网络范围的进程 [1] 。路由工作在OSI参考模型第三层——网络层的数据包转发设备。 — 百度百科
路由就是通过互联网的网络把信息从原地址传输到目的地的活动. — 维基百科

1.2 生活中的路由器

路由器通过转发数据包来实现网络互连。路由器通常连接两个或多个由IP子网或点到点协议标识的逻辑端口，至少拥有1个物理端口。路由器根据收到数据包中的网络层地址以及路由器内部维护的路由表决定输出端口以及下一跳地址，并且重写链路层数据包头实现转发数据包。— 百度百科
路由中有一个很重要的概念叫路由表; 路由表本质上就是一个映射表,决定了数据包的指向.它是由内网ip和电脑标识的映射关系.
路由器提供了两种机制: 路由和转送

• 路由是决定数据包从来源到目的地的路径
• 转送将输入端的数据转移到合适的输出端

二、路由的阶段

2.1 后端路由阶段

2.1.1 什么是后端渲染?

访问网页时，后端将 html 内容与 json 数据拼接好之后再返回到客户端来渲染。最常使用的是jsp开发,服务器直接生产渲染好对应的HTML页面,返回给客户端进行展示。

一个网站,这么多页面服务器如何处理呢?

• 一个页面有自己对应的网址,也就是URL
• URL会发送到服务器,服务器会通过正则对该URL进行匹配,并且最后交给一个Controller 进行处理
• Controller进行各种处理,最终生成HTML或者数据,返回给前端
• 这就完成了一个IO操作.

后端渲染的优势

• 服务端渲染不需要先下载一堆 js 和 css 后才能看到页面（首屏性能）
• 服务端渲染不用关心浏览器兼容性问题（随着浏览器发展，这个优点逐渐消失）
• 对于电量不给力的手机或平板，减少在客户端的电量消耗很重要

2.1.2 什么是后端路由?

后端路由，其实就是一个web服务器。通过用户请求的url导航到具体的html页面；每跳转到不同的URL，都是重新访问服务端，然后服务端返回页面，页面也可以是服务端获取数据，然后和模板组合，返回HTML，也可以是直接返回模板HTML，然后由前端js再去请求数据，使用前端模板和数据进行组合，生成想要的HTML。
简单的说就是: 后端 处理URL 和 页面之间的映射关系 .

后端路由的缺点

• 一种情况是整个页面的模块由后端人员编写和维护的.
• 另一种情况是前端开发人员如果要开发页面,需要通过Java等语言来编写页面代码
• 通常情况下HTML代码和数据以及对应的逻辑会混在一起,编写和维护都是非常槽糕的事情

2.2 前后端分离阶段

后端只负责提供数据,不负责任何阶段的内容.

• 随着Ajax的出现,有了前后端分离的开发模式.
• 后端只提供API来返回数据,前端通过Ajax获取数据,并且可以通过JavaScript 将数据渲染到页面中.
• 这样做最大的优点就是前后端责任的清晰,后端专注于数据上,前端专注于交互和可视化上.
• 并且当移动端(IOS/Android) 出现后,后端不需要进行任何处理,依然使用之前的一套API 即可.

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

2.3 单页面富应用阶段

SPA(Simple Pageweb Application 单页面富应用)最主要的特点就是在前后端分离的基础上加了一层前端路由,也就是前端来维护一套路由规则;整个网页只有一个HTML页面.
前端路由的核心: 改变URL,但是页面不进行整体的刷新

三、url的hash 和 HTML5的history

如何在改变url的前提下,使页面不进行整体的刷新

3.1 url的hash方法

3.2 HTML5的history 方法

3.2.1 HTML5 的 history.pushState(data,title,?Url)

history.pushState(data, title, ?url) 是一个入栈出栈,先进后出的过程

3.2.1 HTML5 的 history.replaceState

3.2.2 HTML5 的 history.go

history.forward()

其中history.back() ,history.go() , history.forward() 这三个接口等同于浏览器界面的前进后退

四、vue-router

4.1 认识vue-router

vue-router 是基于路由和组件的; 路由用于设定访问路劲,将路劲和组件映射起来,在vue-router的单页面应用中,页面的路径的改变就是组件的切换.

4.2 安装和使用vue-router

步骤一: 安装vue-router

npm install vue-router --save

步骤二: 在模块化工程中使用它(因为是一个插件,所以可以通过Vue.use() 来安装路由功能)

第一步: 导入路由对象,并且调用Vue.use(VueRouter)
第二步: 创建路由实例,并且传入路由映射配置
第三步: 在Vue实例中挂载创建的路由实例

4.3 路由映射配置和呈现

在main.js中引用

使用vue-router的步骤:

• 第一步:创建路由组件
• 第二步:配置路由映射: 组件和路径映射关系
• 使用路由:通过<router-link> 和 <router-view>

说明:

• <router-link> : 该标签是一个vue-router 中已经内置的组件,它会被渲染成一个<a>标签
• <router-view> : 该标签会根据当前的路径,动态渲染出不同的组件
• 网页的其他内容,比如顶部的标题/导航,或者底部的一些版权信息等是和<router-view> 处于同一个等级
• 在路由切换时,切换的是<router-view> 挂载的组件,其他内容不会发生改变

4.4 路由的默认路径

默认情况下,进入网站首页,我们希望<router-view> 渲染首页的内容;如何配置让路径默认跳到首页,并且<router-view> 渲染首页组件呢?
在index.js配置routes对象时,添加一个重定向

配置分析:
在routes 中配置了一个映射
path配置的根路径是: /
redirect 是重定向,也就是我们将根据路径重定向到/home的路径下,这样就可以得到我们想要的结果了

4.5 路径由默认的hash值改成history

4.6 router-link补充

属性: to ,用于指定跳转的路径
tag: tag可以指定<router-link> 之后渲染成什么组件,比如<a>标签改成<button>按钮
replace : replace不会留下history记录,所以指定replace的情况下,后退键返回不能返回到上一个页面中


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

• 在进行高亮显示的导航菜单或者底部tabbar时,会使用到该类.
• 但是通常不会修改类的属性,会直接使用默认的router-link-active即可

如果要修改,配置如下

4.7 路由代码跳转