VUE去除url地址栏#号

  • A+
所属分类:Kubernetes

需求

1、判断User-Agent来源是微信客户端,请求www.123.com重写到www.456.com

2、如果客户端请求url包含某些特定字符,不进行rewrite重写。

H5项目通过VUE部署,Vue-Route默认路由模式hash,浏览器URL地址栏中会出现“#”,#号后面的字符,会被浏览器解析成位置标识符,这些字符不会发送到服务端,所以Ingress内置变量$uri无法捕获到结果,导致if判断不生效。

解决办法

1、最笨的方法就是在#号前面增加参数,这样导致URL巨丑无比;

2、Vue-Route路由模式history,可以完美解决这个问题,去除地址栏#号。Ingress通过内置变量$uri,捕获特定字符串,进行重写。

3、如果启用history路由模式,后端Nginx必须将请求重写到index.html,否则请求页面会报错404

Ingress配置

[root@k8s-M ~]# kubectl -n test get ingress x002 -o yaml
apiVersion: extensions/v1beta1
kind: Ingress
metadata:
  annotations:
    nginx.ingress.kubernetes.io/server-snippet: |
      set $agentflag 0;

      if ($http_user_agent ~ 'MicroMessenger' ){
        set $agentflag 1;
      }

      if ($uri ~* "crMessage" ){
        set $agentflag 3;
      }
      if ($uri ~* "/h8/.*" ){
        set $agentflag 2;
      }
      if ($uri ~* "/user/profile" ){
        set $agentflag 2;
      }

      if ($uri ~* "/bean/.*" ){
        set $agentflag 2;
      }

      if ($uri ~* "/pay/.*" ){
        set $agentflag 2;
      }

      if ($uri ~* "/auth/.*" ){
        set $agentflag 2;
      }

      if ( $agentflag = 1 ) {
        rewrite ^/(.*) http://www.456.com/$1 permanent;
      }
    
  name: x002
  namespace: test
spec:
  rules:
  - host: www.123.com
    http:
      paths:
      - backend:
          serviceName: fgateway
          servicePort: 80
        path: /
  - host: www.123.com
    http:
      paths:
      - backend:
          serviceName: show-pay
          servicePort: 80
        path: /h8
  - host: www.123.com
    http:
      paths:
      - backend:
          serviceName: show-h5
          servicePort: 80
        path: /h5
  - host: www.123.com
    http:
      paths:
      - backend:
          serviceName: show-h5
          servicePort: 80
        path: /special
  - host: www.123.com
    http:
      paths:
      - backend:
          serviceName: show-h5
          servicePort: 80
        path: /MP_verify_sqW5R3kO8t8T4hxr.txt
  - host: www.123.com
    http:
      paths:
      - backend:
          serviceName: show-h5-course
          servicePort: 80
        path: /h5/course
status:
  loadBalancer: {}

修改Nginx镜像

从镜像仓库拉取nginx镜像,随机映射端口

docker run -it -d -P --name show-h5-course 192.168.0.209/kaifa/nginx /bin/bash

默认镜像没有vim,进行安装,修改默认配置

docker exec -it show-h5-course bash
apt-get update
apt-get install vim
vim /etc/nginx/conf.d/default.conf

重启容器

docker restart show-h5-course

提交至镜像仓库

docker commit show-h5-course 192.168.0.209/kaifa/show-h5-course
 docker push 192.168.0.209/kaifa/show-h5-course

Nginx配置方式

第一种方法:(官方推荐)

location / {
    root  /www/html;
    index index.html index.htm;
    try_files $uri $uri/ /index.html;
}

第二种方法

location /{

    root  /www/html;
    index  index.html index.htm;    if (!-e $request_filename) {
        rewrite ^/(.*) /index.html last;        break;
    }
}

第三种方法(修改404容易遭到劫持,不推荐)

location /{

    root   /www/html;
    index  index.html index.htm;

    error_page 404 /index.html;
}

参考

https://router.vuejs.org/zh/guide/essentials/history-mode.html

https://www.jianshu.com/p/f7a19f1bafa0

YaLei

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: