Vue-router  知识点

前置

什么是前端渲染 什么是后端渲染？

后端渲染

早期后端渲染阶段

• jsp: java server page
  • html+css+java (java 的作用就是把数据库中的数据动态放在页面中)
• 后端路由
  • 后端处理 URL 和页面之间的映射（对应）关系。早期阶段网页开发整个 html 页面 都是由服务器渲染的

前端渲染

前后端分离开发模式阶段

****由于 Ajax 的出现，有了前后端分离开发模式。  后端只负责提供数据，不负责任何阶段的内容。

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

SPA 单页面富应用阶段

整个网页只有一个 html 页面

---

URL 详解

URL: scheme://host:port/path?query#fragment

**URL: 协议://主机:端口/路经?查询**

****

---

Vue Router 路由实现原理

一、概念

通过改变 URL，在不重新请求页面的情况下，更新页面视图。

二、实现方式

　　更新视图但不重新请求页面，是前端路由原理的核心之一，目前在浏览器环境中这一功能的实现主要有2种方式：

　　　　 1.**Hash **— 利用 URL 中的 hash(“#”);

　　　　 2.利用 History interface** **在 HTML5 中新增的方法。

1. hash URL

本质是改变 window.location 的 hash 属性。来改变 hash。且页面不刷新。

• 在第一个 # 后面出现的任何字符，都会被浏览器解读为位置标识符。这意味着，这些字符都不会被发送到服务器端

2. HTML5 的 history 模式

history 利用了 HTML5 History Interface 中新增的 pushState()和 replaceState（）方法。（需要特定浏览器支持，所以存在兼容问题）

• history.go(n) n:代表跳几页，1：往前一页；-1 回退一页。
• history.pushState({},’’,’about’) 跳转到/about
• history.back(): 回退一页
• history.forward(): 向前一页
• history.replaceState({},’’,’about’) 替换当前的路径为/about。且不能回退。返回。

3. 栈结构

pushState()与 back()就是使用到了 栈结构 的先进后出原理