vue路由拦截+微信小程序webview实现套壳仿真小程序，解决webview没有返回按钮

本文介绍了如何在Vue项目中利用路由拦截实现从H5页面到微信小程序webview的跳转，并在小程序环境中处理返回上一级的逻辑。通过设置微信配置、检测小程序环境以及封装跳转方法，确保页面在不同平台上的正确展示和交互体验。

学习vue，想着搞一个案例吧，就把公司的一个小项目用vue翻新了一个版本，还被拿去正式使用了。领导又说要一个小程序版本的。要你NN个腿儿，原样的东西，套个小程序的壳吧。

小程序套壳有了，但是webview有个蛋疼的问题，H5页面没有返回上一级按钮，嘶~~

小程序新打开页面相当于在路由中添加一个历史记录，而webview相当于新开一个浏览窗口，webview的小程序页面路径也在历史记录里面，那要是H5跳转的时候拦截下来，跳转小程序webview页面再加载链接呢。想到这儿，这思路不就来了嘛。

直接上代码，vue路由拦截：

router.beforeEach((to, from, next) => {
    //判断是否在小程序环境中
	if(store.state.onMiniPrograms){
		var url = "https://www.xxx.com/Public/activity/#"+to.path;
		miniProgramNavigateTo(url);
	}else{
		next();
	}
})

微信配置：

import http from "./http.js"
import store from '../store/index'
import wx from "weixin-js-sdk"

//微信配置方法
const weixinConfig = async () => {
	var config = store.state.weixinConfig;
	if (config.appId == "" || config.appId == null || config.appId == undefined) {
		var url = location.href;
		var index = url.indexOf("#");
		if (index > 0) {
			url = url.substring(0, index);
		}
		url = e