微信公衆號開發vue把hash轉爲history

最近在做微信公衆號項目的時候，因爲獲得簽名或者分享的時候的url微信有如下說明：

url是頁面完整的url(請在當前頁面alert(location.href.split('#')[0])確認)，包括'http(s)://'部分，以及'？'後面的GET參數部分,但不包括'#'hash後面的部分。

作爲前端怎麼把hash轉爲history？

第一步：路由配置的 mode: 'history',

import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);

const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      redirect: '/home/home',
      meta: {
        title: '會議廣場'
      }
    }]
})

// 路由判斷
router.beforeEach((to, from, next) => {
  if (to.meta.title) {
    window.document.title = to.meta.title;
  }
  next()
});
export default router;

第二步：配置nginx

添加

location / {
    try_files $uri $uri/ /index.html;
}

 

server {
        listen       80; 
        server_name  test.registration.boyi365.cn;
        root         /var/boyiStatic/registration-web-test/;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location / {
          try_files $uri $uri/ /index.html;
        }

        error_page 404 /404.html;
            location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }

因爲目前團隊前端負責nginx的配置，如果想後臺配置或者Node.js等其他配置方法可以根據官方文檔配置：

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