Vue.js 前端路由和异步组件介绍_vue.js_

文章目标

P6

• 针对 react/vue 能够根据业务需求口喷 router 的关键配置，包括但不限于：路由的匹配规则、路由守卫、路由分层等；
• 能够描述清楚 history 的主要模式，知道 history 和 router 的边界；

P6+ ~ P7

• 在没有路由的情况下，也可以根据也无需求，实现一个简单的路由；
• 读过 router 底层的源码，不要求每行都读，可以口喷关键代码即可；

一、背景

远古时期，当时前后端还是不分离的，路由全部都是由服务端控制的，前端代码和服务端代码过度融合在一起。

客户端 --> 前端发起 http 请求 --> 服务端 --> url 路径去匹配不同的路由 --> 返回不同的数据。

这种方式的缺点和优点都非常明显：

• 优点：因为直接返回一个 html，渲染了页面结构。SEO 的效果非常好，首屏时间特别快；
  • 在浏览器输入一个 url 开始到页面任意元素加载出来/渲染出来 --> 首屏时间；
• 缺点：前端代码和服务端代码过度融合在一起，开发协同非常的乱。服务器压力大，因为把构建 html 的工作放在的服务端；

后来 ...随之 ajax 的流行，异步数据请求可以在浏览器不刷新的情况下进行。

后来 ...出现了更高级的体验 —— 单页应用。

• 页 --> HTML 文件
• 单页 --> 单个 HTML 文件

在单页应用中，不仅在页面中的交互是不刷新页面的，就连页面跳转也都是不刷新页面的。

单页应用的特点：

• 页面中的交互是不刷新的页面的，比如点击按钮，比如点击出现一个弹窗；
• 多个页面间的交互，不需要刷新页面(a/b/c，a-> b -> c)；加载过的公共资源，无需再重复加载；

而支持起单页应用这种特性的，就是 前端路由。

二、前端路由特性

前端路由的需求是什么？

• 根据不同的 url 渲染不同内容；
• 不刷新页面；

也就是可以在改变 url 的前提下，保证页面不刷新。

三、面试！！！

Hash 路由和 History 路由的区别？

• hash 有 #，history 没有 #；
• hash 的 # 部分内容不会给服务端，主要一般是用于锚点， history 的所有内容都会给服务端；
• hash 路由是不支持 SSR 的，history 路由是可以的；
• hash 通过 hashchange 监听变化，history 通过 popstate 监听变化；

四、Hash 原理及实现

1、特性

hash 的出现满足了这个需求，他有以下几种特征：

• url 中带有一个 # 符号，但是 # 只是浏览器端/客户端的状态，不会传递给服务端；
  • 客户端路由地址 www.baidu.com/#/user --> 通过 http 请求 --> 服务端接收到的 www.baidu.com/
  • 客户端路由地址 www.baidu.com/#/list/detail/1 --> 通过 http 请求 --> 服务端接收到的 www.baidu.com/
• hash 值的更改，不会导致页面的刷新；

location.hash = '#aaa'; location.hash = '#bbb'; // 从 #aaa 到 #bbb，页面是不会刷新的

• 不同 url 会渲染不同的页面；
• hash 值的更改，会在浏览器的访问历史中添加一条记录，所以我们才可以通过浏览器的返回、前进按钮来控制 hash 的切换；
• hash 值的更改，会触发 hashchange 事件；

location.hash = '#aaa'; location.hash = '#bbb'; window.addEventLisenter('hashchange', () => {});

2、如何更改 hash

我们同样有两种方式来控制 hash 的变化：

• location.hash 的方式：

location.hash = '#aaa'; location.hash = '#bbb';

• html 标签的方式：

 点击跳转到 user  location.hash = '#user';

3、手动实现一个基于 hash 的路由

• ./index.html

灰色绿色白色返回

• ./index.css

.container { width: 100%; height: 60px; display: flex; justify-content: space-around; align-items: center; font-size: 18px; font-weight: bold; background: black; color: white; } a:link, a:hover, a:active, a:visited { text-decoration: none; color: white; }

• ./index.js

/* 期望看到的效果：点击三个不同的 a 标签，页面的背景颜色会随之变化 */ class BaseRouter { constructor() { this.routes = {}; // 存储 path 以及 callback 的对应关系 this.refresh = this.refresh.bind(this); // 如果不 bind 的话，refresh 方法中的 this 指向 window // 处理页面 hash 变化，可能存在问题：页面首次进来可能是 index.html，并不会触发 hashchange 方法 window.addEventListener('hashchange', this.refresh); // 处理页面首次加载 window.addEventListener('load', this.refresh); } /** * route * @param {*} path 路由路径 * @param {*} callback 回调函数 */ route(path, callback) { console.log('========= route 方法 ========== ', path); // 向 this.routes 存储 path 以及 callback 的对应关系 this.routes[path] = callback || function () {}; } refresh() { // 刷新页面 const path = `/${location.hash.slice(1) || ''}`; console.log('========= refresh 方法 ========== ', path); this.routes[path](); } } const body = document.querySelector('body'); function changeBgColor(color) { body.style.backgroundColor = color; } const Router = new BaseRouter(); Router.route('/', () => changeBgColor('white')); Router.route('/green', () => changeBgColor('green')); Router.route('/gray', () => changeBgColor('gray'));

五、History 原理及实现

hash 有个 # 符号，不美观，服务端无法接受到 hash 路径和参数。

历史的车轮无情撵过 hash，到了 HTML5 时代，推出了 History API。

1、HTML5 History 常用的 API

window.history.back(); // 后退 window.history.forward(); // 前进 window.history.go(-3); // 接收 number 参数，后退 N 个页面 window.history.pushState(null, null, path); window.history.replaceState(null, null, path);

其中最主要的两个 API 是 pushState 和 replaceState，这两个 API 都可以在不刷新页面的情况下，操作浏览器历史记录。

不同的是，pushState 会增加历史记录，replaceState 会直接替换当前历史记录。

2、pushState/replaceState 的参数

• pushState：页面的浏览记录里添加一个历史记录；
• replaceState：替换当前历史记录；

他们的参数是⼀样的，三个参数分别是：

• state：是一个对象，是一个与指定网址相关的对象，当 popstate 事件触发的时候，该对象会传入回调函数；
• title：新页面的标题，浏览器支持不一，建议直接使用 null；
• url：页面的新地址；

3、History 的特性

History API 有以下几个特性：

• 没有 #；
• history.pushState() 或 history.replaceState() 不会触发 popstate 事件，这时我们需要手动触发页面渲染；
• 可以使用 history.popstate 事件来监听 url 的变化；
• 只有用户点击浏览器 倒退按钮 和 前进按钮，或者使用 JavaScript 调用 back、forward、go 方法时才会触发 popstate；

4、面试！！！

• pushState 时，会触发 popstate 吗？

  • pushState/replaceState 并不会触发 popstate 事件，这时我们需要手动触发页面的重新渲染；

• 我们可以使用 popstate 来监听 url 的变化；

• popstate 到底什么时候才能触发：

  • 点击浏览器后退按钮；
  • 点击浏览器前进按钮；
  • js 调用 back 方法；
  • js 调用 forward 方法；
  • js 调用 go 方法；

5、手动实

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！

上一篇：JavaScript变量中var,let和const的区别_javascript技巧_

下一篇：Vue.js 状态管理及 SSR解析_vue.js_