使用VUE在微信应用开发过程中不管是支付,扫码,分享都会遇到/#/
后面的VUE路由不生效的问题,包括Fastadmin的登录回调也不能带参数。这篇文字提供一个完美的解决方案!两种情况同时生效!
解决思路:既然登录回调或者VUE微信应用JSSDK的地方都不能使用参数或者VUE路由做为回调URL,那我们就用PHP实现跳转,我尝试过修改VUE路由模式,但多应用的情况下就算用NGINX转发效果都不是很好,且麻烦。唯独PHP跳转的方式最为绿色、简单。
实现过程:
已Fastadmin登录回调VUE路由为例,VUE在微信中JSSDK用到的回调地址也是同样的步骤。
Fastadmin登录回调地址:http://fastadmin.local/index/user/login.html?url=回调地址登录成功后需要跳转的VUE路由http://fastadmin.local/vue/#/home错误做法1http://fastadmin.local/index/user/login.html?url=/vue/#/home错误做法2http://fastadmin.local/index/user/login.html?url=http://fastadmin.local/vue/#/home
第一步:
首选我们在自己的模块应用下定义一个方法这里命名为vue_router_callback
。
/** 解决fastadmin登录回调、微信各种回调时清楚vue路由 */ public function vue_router_callback(Request $request) { $param = $request->param(); $this->redirect('/vue/#/.$param['name']); } 当前方法的路由地址: http://fastadmin.local/index/vue_router_callback/name/home 这里注意最后一个home,表示的是fastadmin.local/vue/#/home,VUE的路由地址,想跳到哪里就写哪里!
第二步:
把上面定义的方法路由写入回调URL中,就可以解决这个问题http://fastadmin.local/index/user/login.html?url=/index/vue_router_callback/name/home
实际我的项目是通过VUE路守卫来拦截用户是否登录的,具体代码如下:
router.afterEach((to, from) => { // 判断当前路由是否需要登录,需要登录的路由将会被劫持到登录界面 if (to.meta.requireAuth === true) { let token = VueCookies.get('token'); let name = from.name ? from.name : 'home' let id = from.params.id if (token) return // 判断用户是否已经登录 router.push({ name }) // 拼接URL地址 let host = window.location.protocol + "//" + window.location.host // 拼接登录回到地址 let callback_url = `?url=/index/vue_router_callback/name/${name}` // 跳转Fastadmin登录 window.location.href = host + '/index/user/login.html' + callback_url }})
如果是微信JSSDK回调,可以直接写,举一反三,可以加参数。
http://fastadmin.local/index/vue_router_callback/name/home
希望以上内容对你有所帮助!如果还有其他问题,请随时提问。 各类知识收集 拥有多年CMS企业建站经验,对 iCMS, LeCMS, ClassCMS, Fastadmin, PbootCMS, PHPCMS, 易优CMS, YzmCMS, 讯睿CMS, 极致CMS, Wordpress, HkCMS, YznCMS, WellCMS, ThinkCMF, 等各类cms的相互转化,程序开发,网站制作,bug修复,程序杀毒,插件定制都可以提供最佳解决方案。