面试题(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;
        }

详细文章

猜你喜欢

转载自blog.csdn.net/Sunshine_GirlXue/article/details/103190236