vue pc端和vue移动端浏览器地址相互跳转并携带参数

这段代码展示了如何根据设备类型(移动端或PC端)使用JavaScript进行智能跳转。通过检查`navigator.userAgent`来判断设备类型,并根据判断结果定向到相应的URL。在移动端,它会跳转到移动端地址;而在PC端,则不执行跳转。

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

1.0 在pc项目app.vue 

  created() {
    // 调用
    this.goOrther();
  },
  methods: {
    goOrther() {
      var is_mobi =
        navigator.userAgent
          .toLowerCase()
          .match(
            /(ipod|iphone|android|coolpad|mmp|smartphone|midp|wap|xoom|symbian|j2me|blackberry|wince)/i
          ) != null;
      if (is_mobi) {
         // 如果是移动端就跳转到移动端地址
        let params = new URL(window.location.href).hash;   // new URL 可以得到相关的地址详情
        let baseurl = "http://localhost:8080/" + params;   // 测试接口 
        // let baseurl = "http://www.td-button.com/" + params;  // 线上接口
        //  利用方法跳转到对应的页面  
        window.location.href = baseurl;
      } else {
        // 如果是pc 端就不用跳转到其他页面
        // window.location.href = "http://172.20.10.3:8081/"
      }
    },
  },
};

2.0 在移动端项目app.vue 

 created() {
    // 网站跳转
    this.goOrther();
  },
  methods: {
    goOrther() {
      var is_mobi =
        navigator.userAgent
          .toLowerCase()
          .match(
            /(ipod|iphone|android|coolpad|mmp|smartphone|midp|wap|xoom|symbian|j2me|blackberry|wince)/i
          ) != null;
      if (is_mobi) {
         
      } else {
         // 如果不是移动端就跳转到pc网址
        let params = new URL(window.location.href).hash; // new URL 可以得到相关的地址详情
        let baseurl = "http://localhost:8080/" + params; // 测试接口
        // let baseurl = "http://www.td-button.com/" + params;  // 线上接口
        //  利用方法跳转到对应的页面
        window.location.href = baseurl;
      }
    },
  },
};

### 如何在 UniApp 中内嵌 H5 页面实现 WebView 跳转 #### 创建页面结构 为了实现在 UniApp 中内嵌 H5 页面,需创建三个主要页面:两个位于小程序内部的操作页 `pageA` 展示容纳 H5 的展示页 `PageWebview.vue`;另一个则是具有可访问线上 URL 的独立 H5 页面 `pageB`[^1]。 #### 配置 PageWebview 组件 在 `PageWebview.vue` 文件中配置 `<web-view>` 组件来加载外部网页链接: ```html <template> <div class="container"> <!-- 使用 web-view 加载指定URL --> <web-view :src="webViewSrc"></web-view> </div> </template> <script> export default { data() { return { webViewSrc: 'https://example.com/pageB' // 替换成实际的 pageB 地址 }; } }; </script> ``` 此部分展示了如何通过设置 `src` 属性指向目标网站地址完成基本集成工作。 #### 实现消息通信机制 为了让宿主应用能够接收到来自 H5 页面的消息通知以便触发相应动作(比如返回),可以在 H5 页面里调用 JavaScript API 发送数据给容器侧: ```javascript // 在 H5 页面中的某个事件处理器函数体内执行下面这行代码发送消息至 uni-app 容器 uni.webView.postMessage({data: '这是H5传递的值'}); ``` 当接收方即为上述提到的小程序内的 `PageWebview.vue` 页面时,则可在其对应的 Vue 单文件组件定义处监听特定事件从而响应这些交互请求[^2]。 #### 处理登录逻辑案例分析 对于涉及身份验证场景下的跨平台协作流程设计而言,一种常见做法是在 PC 或者其他服务环境先完成认证过程再重定向回移动端应用程序,附带必要的参数信息用于后续处理。例如,在成功登陆后会跳转向带有查询字符串形式编码的身份令牌 (`code`) 的 URL 上下文中去更新本地状态或发起进一步的服务请求: ```javascript document.addEventListener('UniAppJSBridgeReady', function () { const urlParts = window.location.href.split('?'); const paramsPart = urlParts.length > 1 ? urlParts[1].split('=') : []; const authCode = paramsPart.length === 2 && paramsPart[0] === 'code'? decodeURIComponent(paramsPart[1]) : ''; if (authCode){ uni.reLaunch({ url: `/pages/loginSuccess?code=${encodeURIComponent(authCode)}` }); } }); ``` 这段脚本片段说明了怎样利用浏览器全局对象 `window.location` 来解析当前网址路径及其携带的数据项,进而依据条件判断是否应该启动新的路由导航行为以继续业务流[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值