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

你好小同志

已于 2022-08-23 11:11:00 修改

阅读量1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js 前端 javascript

于 2022-08-22 09:49:09 首次发布

本文链接：https://blog.youkuaiyun.com/wangkangyang/article/details/126459933

vue 专栏收录该内容

7 篇文章

订阅专栏

这段代码展示了如何根据设备类型（移动端或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;
      }
    },
  },
};