vue-router实现原理
1: 有两种方式:
1. 在地址中加入#以欺骗浏览器,地址的改变是由于正在进行页内导航
2. 使用H5的window.history功能,使用URL的Hash来模拟一个完整的URL。
1: hash —— 即地址栏 URL 中的 # 符号(此 hash 不是密码学里的散列运算)。比如这个 URL:http://www.abc.com/#/hello hash 的值为 #/hello。它的特点在于:hash 虽然出现在 URL 中,但不会被包括在 HTTP 请求中,对后端完全没有影响,因此改变 hash 不会重新加载页面。
2: history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。(需要特定浏览器支持)这两个方法应用于浏览器的历史记录栈,在当前已有的 back、forward、go 的基础之上,它们提供了对历史记录进行修改的功能。只是当它们执行修改时,虽然改变了当前的 URL,但浏览器不会立即向后端发送请求。
history模式的问题
对于单页应用来说,理想的使用场景是仅在进入应用时加载index.html,后续在的网络操作通过ajax完成,不会根据url重新请求页面,但是如果用户直接在地址栏中输入并回车,浏览器重启重新加载等特殊情况。
hash模式仅改变hash部分的内容,而hash部分是不会包含在http请求中的(hash带#):
官方推荐的解决办法是在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。同时这么做以后,服务器就不再返回 404 错误页面,因为对于所有路径都会返回 index.html 文件。为了避免这种情况,在 Vue 应用里面覆盖所有的路由情况,然后在给出一个 404 页面。或者,如果是用 Node.js 作后台,可以使用服务端的路由来匹配 URL,当没有匹配到路由的时候返回 404,从而实现 fallback。
Vue响应式原理
当一个Vue实例创建时,vue会遍历data选项的属性,用 Object.defineProperty 将它们转为 getter/setter并且在内部追踪相关依赖,在属性被访问和修改时通知变化。
每个组件实例都有相应的 watcher 程序实例,它会在组件渲染的过程中把属性记录为依赖,之后当依赖项的 setter 被调用时,会通知 watcher 重新计算,从而致使它关联的组件得以更新。
https://i.loli.net/2019/04/03/5ca406c4a679a.png
SPA 路由History模式 刷新404问题
原因
刷新404,为什么,因为本地路径中没有这个真实资源存在,这些访问资源都是在js里渲染的。我们只需要在服务器配置如果URL匹配不到任何静态资源,就跳转到默认的index.html。
解决方案
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;
}
记住修改配置后一定要重启Nginx服务器,否则无效,Nginx相关命令, 自行百度
nginx 代理知识充电:
proxy_pass 的路径,如果不带uri的话,就是直接原路径代理匹配,带有uri的话,就去掉匹配项再匹配,
实例如下:
(1)
访问 http://www.wyunfei.com/testa/aaa
后端的request_uri为: /testa/aaa
location ^~ /testa/ {
proxy_pass http://127.0.0.1:8801;
}
(2)
访问 http://www.wyunfei.com/testa/bbb
后端的request_uri为: /testa/bbb
location ^~ /testb/ {
proxy_pass http://127.0.0.1:8801/;
}
网友评论