一个网站路由规划

155 阅读1分钟

一个网站路由规划

  • 新增一个虚拟目录用于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