面试题(4)vue-router实现原理, Vue响应式原理,解决404问题

(1)vue-router实现原理

vue-router提供三种路由模式

1.hash模式
默认模式，通过路径中的hash值来控制路由跳转，不存在兼容问题
hash模式实现原理
在正常路径后跟一个 # 号，匹配 # 后边的路径为前端路由，通过window.onhashchange方法来操控路由改变的时候切换内容

2.history模式
H5新增的 history API，相对hash而言，不会显示#号，但是需要服务器端配置
history模式实现原理
看起来与后端路由没有任何区别，在window.history这个对象中，包含浏览器的历史，而在HTML5中，新增了pushState和replaceState，通过这两个API可以改变url地址且不会发送请求，同时还有popstate事件，实现原理与hash相似，只不过因为没有了 # 号，所以刷新页面还是会向服务器发送请求，而后端没有对应的处理措施的话，会返回404，所以需要后端配合

3.abstract模式
abstract模式实现原理
支持javascript的所有运行环境，常指Node.js服务器环境
abstract模式是不依赖于浏览器环境的一种模式，它是VueRouter内部使用数组进行模拟了路由管理，在node环境，或者原生App环境下，都会默认使用abstract模式，VueRouter内部会根据所处的环境自行判断，默认使用hash模式，如果检测到没有浏览器API的时候，就会使用abstract模式。

Vue-router详细文章

(2) Vue响应式原理

Vue响应式底层实现方法是 Object.defineProperty() 方法，该方法中存在一个getter和setter的可选项，可以对属性值的获取和设置造成影响

而且Vue中编写了一个watcher来处理数据

在使用getter方法和setter方法时，数据一旦发生变化，就会通知watcher实例对view层渲染页面。

(3)SPA路由为history刷新404，为什么？如何解决（说出一种服务器下的配置方法即可）？

原因：刷新404，为什么，因为本地路径中没有这个真实资源存在，这些访问资源都是在js里渲染的。我们只需要在服务器配置如果URL匹配不到任何静态资源，就跳转到默认的index.html。

解决方案：在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。同时这么做以后，服务器就不再返回 404 错误页面，因为对于所有路径都会返回 index.html 文件。为了避免这种情况，在 Vue 应用里面覆盖所有的路由情况，然后在给出一个 404 页面。或者，如果是用 Node.js 作后台，可以使用服务端的路由来匹配 URL，当没有匹配到路由的时候返回 404，从而实现后退。

//nginx服务器下
server {
        listen       8089; // 端口
        server_name  localhost; // 访问地址，默认是本机
       location / {
            try_files $uri $uri/ @router; // 需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
            index  index.html index.htm;
        }
        // 对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
        #因此需要rewrite到index.html中，然后交给路由在处理请求资源
        location @router {
            rewrite ^.*$ /index.html last;
        }
1
2
3
4
5
6
7
8
9
10
11
12
13

详细文章