vue SPA项目 IOS微信分享文章详情页，但分享链接为主页

最新推荐文章于 2021-06-04 10:09:19 发布

zhaohanqq

最新推荐文章于 2021-06-04 10:09:19 发布

阅读量2.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue ios微信分享

本文链接：https://blog.youkuaiyun.com/zhaohanqq/article/details/86624965

vue 专栏收录该内容

29 篇文章

订阅专栏

本文探讨了单页应用(SPA)在iOS和Android设备上路由行为的不同，特别是在URL变化方面。iOS环境下，SPA的URL不会随路由改变而更新，这可能影响到签名请求的正确性。文章提供了在Vue.js中使用beforeEach钩子来检查并修正URL路径的方法，确保了跨平台的一致性和功能的正确实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

IOS：每次切换路由，SPA的url是不会变的，发起签名请求的url参数必须是当前页面的url就是最初进入页面时的url

Android：每次切换路由，SPA的url是会变的，发起签名请求的url参数必须是当前页面的url(不是最初进入页面时的)

所以IOS需要修正url路径

router.beforeEach((to, from, next) => {
    const agent = navigator.userAgent
    const isiOS = !!agent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) // ios终端
    if (!to.meta.requireAuth) {
        if (isiOS && to.path !== location.pathname) {
            // 此处不可使用location.replace
            location.assign(to.fullPath)
          } else {
            next()
          }
    } else {
        if (!localStorage.getItem("UserCode") || localStorage.getItem("Company") !== '歐嘉璐尼') {
            Vue.toast('请先登录!');
            next('/login');
        } else {
            if (isiOS && to.path !== location.pathname) {
                // 此处不可使用location.replace
                location.assign(to.fullPath)
              } else {
                next()
              }
        }
    }

window.location.assign(url) ：加载 URL 指定的新的 HTML 文档。就相当于一个链接，跳转到指定的url，当前页面会转为新页面内容，可以点击后退返回上一个页面。