前言
最近做的Vue SPA项目涉及到微信自定义分享，最初只是在指定页面下实现微信的二次分享功能。但是因为移动端使用的是vue-router的history模式，所以在iOS端微信和Android端微信分享时出现了问题。经过一番调研和尝试，最终解决方案是通过修改Vue Router的配置来实现微信自定义分享。
历史模式下微信分享的问题
首先，我们需要了解什么是历史模式（History Mode）。在 Vue Router 中，历史模式是指使用 HTML5 的 History API 来管理 URL 的变化，而不是传统的哈希值（）方式。这种模式可以让我们在浏览器中实现类似于单页应用的体验。
但是，在 iOS 设备上，微信分享时会出现问题，因为微信会尝试使用 JavaScript 来获取当前页面的 URL，这个过程中会导致历史模式下的 URL 变化，而微信又无法正确解析这个变化，从而导致分享失败。
解决方案
为了解决这个问题，我们需要在 Vue Router 的配置中添加一个特殊的钩子函数，来捕捉到微信分享时的 URL 变化，并将其转换为传统的哈希值方式。这样一来，微信就可以正确解析 URL 并进行分享。
具体来说，我们需要在 `router/index.js` 文件中添加以下代码：
```javascriptimport Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const router = new Router({
mode: 'history',
base: '/',
routes: [
{
path: '/',
name: 'home',
component: () => import('@/views/Home.vue')
},
{
path: '/about',
name: 'about',
component: () => import('@/views/About.vue')
}
]
})
// 添加钩子函数来捕捉微信分享时的 URL 变化router.beforeEach((to, from, next) => {
if (window.location.href.includes('weixin')) {
// 微信分享时，转换 URL 为传统的哈希值方式 window.history.pushState(null, null, `${window.location.pathname}`);
}
next();
})
export default router;
```
在这个代码中，我们添加了一个 `beforeEach` 钩子函数，这个钩子函数会在每次路由切换之前被调用。我们检查当前 URL 是否包含微信的关键字，如果是，则转换 URL 为传统的哈希值方式。
微信自定义分享
现在，我们可以在指定页面下实现微信的二次分享功能了。具体来说，我们需要在 `Home.vue` 或 `About.vue` 等页面中添加以下代码：
```html
```
在这个代码中，我们添加了一个 `shareWeixin` 方法，这个方法会调用微信的分享接口，并传递分享内容。我们也定义了一个 `wx.config` 函数来配置微信的 API。
总结
通过以上步骤，我们可以实现 Vue SPA项目中的微信自定义分享功能，解决历史模式下微信分享的问题。
