一个网站路由规划
- 新增一个虚拟目录用于NG路由转发标识,区别于原路由规划。
- 为了便于工程路由简化以及后续工程迁移升级改版需要(xx.com/xx/xx/),会引入contextPath 和contenxtBase 标识。 contextPath 用于标识、升级,区别于原路由 contextBase 用于标识新路由下的应用模块, 如:activity, help, pay 等,类似如下:
NG参考配置
# 本地开发子工程配置
location ~ ^/v2/(pay|activity|help) {
proxy_ignore_client_abort on;
proxy_send_timeout 15;
proxy_connect_timeout 15;
proxy_read_timeout 15;
proxy_buffering on;
proxy_buffer_size 32k;
proxy_buffers 8 32k;
proxy_busy_buffers_size 64k;
proxy_next_upstream http_502 http_504 error timeout invalid_header;
proxy_pass http://xxx_$1;
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
break;
}
# or
location ~ ^/verdaccio/(.*)$ {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $host;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-NginX-Proxy true;
proxy_pass http://127.0.0.1:4873/$1;
proxy_redirect off;
}
由于工程vueRouter路由设置了base路由属性,所以在跳转的时候,是不需要带contextPath 和contextBase路径。但当跳原工程时是需要的,因而这里需要弄个参数控制。
路由跳转可能的场景:
- 当前单页工程路由的跳转
- 模块工程间的跳转
- 分模块工程间的跳转
- 跳转微信小程序原生页面
- 跳转微信小程序webview 页面
- app内跳微信小程序
实现流程图:
/lib/vm.js