404单页应用报错路由_面试官：说说你对SPA（单页应用）的理解?

一、什么是SPA

SPA(single-page application)&＃xff0c;翻译过来就是单页应用

SPA是一种网络应用程序或网站的模型&＃xff0c;它通过动态重写当前页面来与用户交互&＃xff0c;这种方法避免了页面之间切换打断用户体验

在单页应用中&＃xff0c;所有必要的代码(HTML、Javascript和CSS)都通过单个页面的加载而检索&＃xff0c;或者根据需要(通常是为响应用户操作)动态装载适当的资源并添加到页面

页面在任何时间点都不会重新加载&＃xff0c;也不会将控制转移到其他页面

举个例子来讲就是一个杯子&＃xff0c;早上装的牛奶&＃xff0c;中午装的是开水&＃xff0c;晚上装的是茶&＃xff0c;我们发现&＃xff0c;变的始终是杯子里的内容&＃xff0c;而杯子始终是那个杯子

结构如下图

我们熟知的JS框架如react,vue,angular,ember都属于SPA

二、SPA和MPA的区别

上面大家已经对单页面有所了解了&＃xff0c;下面来讲讲多页应用

MPA(MultiPage-page application)&＃xff0c;翻译过来就是多页应用

在MPA中&＃xff0c;每个页面都是一个主页面&＃xff0c;都是独立的

当我们在访问另一个页面的时候&＃xff0c;都需要重新加载html、css、js文件&＃xff0c;公共文件则根据需求按需加载

如下图

单页应用与多页应用的区别

单页应用优缺点

优点&＃xff1a;

• 具有桌面应用的即时性、网站的可移植性和可访问性
• 用户体验好、快&＃xff0c;内容的改变不需要重新加载整个页面
• 良好的前后端分离&＃xff0c;分工更明确

缺点&＃xff1a;

• 不利于搜索引擎的抓取
• 首次渲染速度相对较慢

三、实现一个SPA

原理

1. 监听地址栏中hash变化驱动界面变化
2. 用pushsate记录浏览器的历史&＃xff0c;驱动界面发送变化

实现

hash 模式

核心通过监听url中的hash来进行路由跳转

// 定义 Router
class Router {
    constructor () {
        this.routes &＃61; {}; // 存放路由path及callback
        this.currentUrl &＃61; &＃39;&＃39;;
        
        // 监听路由change调用相对应的路由回调
        window.addEventListener(&＃39;load&＃39;, this.refresh, false);
        window.addEventListener(&＃39;hashchange&＃39;, this.refresh, false);
    }
    
    route(path, callback){
        this.routes[path] &＃61; callback;
    }
    
    push(path) {
        this.routes[path] && this.routes[path]()
    }
}

// 使用 router
window.miniRouter &＃61; new Router();
miniRouter.route(&＃39;/&＃39;, () &＃61;> console.log(&＃39;page1&＃39;))
miniRouter.route(&＃39;/page2&＃39;, () &＃61;> console.log(&＃39;page2&＃39;))

miniRouter.push(&＃39;/&＃39;) // page1
miniRouter.push(&＃39;/page2&＃39;) // page2


history模式

history 模式核心借用 HTML5 history api&＃xff0c;api 提供了丰富的 router 相关属性

先了解一个几个相关的api

• history.pushState 浏览器历史纪录添加记录
• history.replaceState修改浏览器历史纪录中当前纪录
• history.popState 当 history 发生变化时触发

// 定义 Router
class Router {
    constructor () {
        this.routes &＃61; {};
        this.listerPopState()
    }
    
    init(path) {
        history.replaceState({path: path}, null, path);
        this.routes[path] && this.routes[path]();
    }
    
    route(path, callback){
        this.routes[path] &＃61; callback;
    }
    
    push(path) {
        history.pushState({path: path}, null, path);
        this.routes[path] && this.routes[path]();
    }
    
    listerPopState () {
        window.addEventListener(&＃39;popstate&＃39; , e &＃61;> {
            const path &＃61; e.state && e.state.path;
            this.routers[path] && this.routers[path]()
        })
    }
}

// 使用 Router

window.miniRouter &＃61; new Router();
miniRouter.route(&＃39;/&＃39;, ()&＃61;> console.log(&＃39;page1&＃39;))
miniRouter.route(&＃39;/page2&＃39;, ()&＃61;> console.log(&＃39;page2&＃39;))

// 跳转
miniRouter.push(&＃39;/page2&＃39;)  // page2


四、题外话&＃xff1a;如何给SPA做SEO

下面给出基于Vue的SPA如何实现SEO的三种方式

1. SSR服务端渲染

将组件或页面通过服务器生成html&＃xff0c;再返回给浏览器&＃xff0c;如nuxt.js

2. 静态化

目前主流的静态化主要有两种&＃xff1a;

(1)一种是通过程序将动态页面抓取并保存为静态页面&＃xff0c;这样的页面的实际存在于服务器的硬盘中

(2)另外一种是通过WEB服务器的 URL Rewrite的方式&＃xff0c;它的原理是通过web服务器内部模块按一定规则将外部的URL请求转化为内部的文件地址&＃xff0c;一句话来说就是把外部请求的静态地址转化为实际的动态页面地址&＃xff0c;而静态页面实际是不存在的。这两种方法都达到了实现URL静态化的效果

3. 使用Phantomjs针对爬虫处理

原理是通过Nginx配置&＃xff0c;判断访问来源是否为爬虫&＃xff0c;如果是则搜索引擎的爬虫请求会转发到一个node server&＃xff0c;再通过PhantomJS来解析完整的HTML&＃xff0c;返回给爬虫。

下面是大致流程图

参考文献

• https://segmentfault.com/a/1190000019623624
• https://juejin.cn/post/6844903512107663368
• https://www.cnblogs.com/constantince/p/5586851.html