对Vue Router 路由管理器的原理及用法的理解与思考（1）

Vue router的实现原理的核心是：1.改变url页面不刷新，2.改变url时，可以监听到路由的变化并能够做出一些处理。

路由的两种模式

Hash模式：Hash是URL中hash（#）及后面的那部分（如https://example.com/#user)橙色部分就是hash。常用作描点在页面内进行导航，hash值的变化并不会导致浏览器向服务器发出请求，不发出请求，也就不会刷新页面。同理也不需要在服务器作任何特殊的处理（因此不利于SEO）【SEO：搜索引擎优化。目标是增加网站在搜索引擎结果页面（SERP）中的可见性，从而吸引更多的有机流量（即非付费流量）。】之后通过主动跳转或者监听hashchange事件监听URL的变化即可实现我们的目标。

HTML5模式（History)：提供了两个方法pushState()和replaceState()，这两个方法改变URL的path部分不会引起页面刷新。通过浏览器前进，后退改变URL时会触发popState事件，而通过pushState()和replaceState()改变URL不会触发popState事件。

pushState()：允许修改浏览器的历史记录堆栈，并更新 URL 而不引起页面刷新。（即新增一个窗口）

pushState() 的基本用法

pushState() 方法接受三个参数：

1. state object: 一个与新历史记录条目关联的JavaScript对象。这个对象可以通过 popstate 事件的 state 属性访问。
2. title: 新的历史记录条目的标题。在大多数浏览器中，这个参数被忽略，因为标题是由 document.title 属性控制的。
3. URL: 新的历史记录条目的 URL。这个 URL 必须与当前页面的域名相同。

示例

// 假设我们有一个单页面应用程序，我们想添加一个新的历史记录条目 // 并更新 URL 为 "/new-page"，同时不引起页面刷新

history.pushState({page: "newPage"}, "New Page Title", "new-page");

在这个例子中，我们创建了一个新的历史记录条目，其中包含一个状态对象 {page: "newPage"}。这个状态对象可以在 popstate 事件的回调函数中访问。

replaceState()：类似于 pushState()，它也允许你修改浏览器的历史记录堆栈，但它不是在历史堆栈中添加一个新的条目，而是替换当前条目。（即停留在当前窗口）

replaceState() 的基本用法

replaceState() 方法同样接受三个参数：

1. state object: 一个与当前历史记录条目关联的JavaScript对象。这个对象可以通过 popstate 事件的 state 属性访问。
2. title: 历史记录条目的标题。与 pushState() 一样，这个参数在大多数浏览器中被忽略，因为标题是由 document.title 属性控制的。
3. URL: 要导航到的 URL。与 pushState() 一样，这个 URL 必须与当前页面的域名相同。

示例

// 假设我们想替换当前历史记录条目，并更新 URL 为 "/new-page"，同时不引起页面刷新 history.replaceState({page: "newPage"}, "New Page Title", "new-page");

在这个例子中，我们使用 replaceState() 替换了当前历史记录条目，并更新了 URL 为 "/new-page"。与 pushState() 不同的是，使用 replaceState() 后，用户将无法使用浏览器的后退按钮返回到替换前的状态。

Vue Router的使用方法，有安装引入和直接引入，使用npm安装。

npm install vue-router@next  --save     (--save的作用是将依赖保存到package.json文件中）

Vue Router的使用

在src/views的里面新增自己需要的页面。如图

在主页面内添加路由容器<router-view></router-view>,如图

定义路由的步骤（重点）

定义路由中出现的bug，eslint代码规范提示报错

解决方法：

定义路由的步骤：