Deep link routing to Android/IOS app in vue js

Question

When the user visits the mobile website via android/ios iphone, it should be redirected respective apps in their phone. If they still didn't install the respective apps for the websites, they should be redirected to respective apps in play store or apple store. Inside App.vue file below changes are done.

 const userAgent = window.navigator.userAgent;
 const isIphone = userAgent.match(/iPhone/);
 const isAndroid = userAgent.match(/Android/);
 const isIpad = userAgent.match(/iPad/);       
 
 beforeCreate: function() {
  if ((isIphone === "iPhone" || isAndroid === "Android") && isIpad === "null") {
    window.location = `{yourApp}:///`;
  }
 },
 created: function() {
  if (isIphone || isAndroid) {
   setTimeout(() => {
    if (isIphone === "iPhone") {
      window.location.href = "https://apps.apple.com/app/id{<app id>}"; //here add your correct app id
    } else if (isAndroid === "Android") {
      window.location.href =
        "https://play.google.com/store/apps/details?id=<app id>"; //here add your correct app id
    }
   }, 2500);
  }
 }

But it won't work as I expected. I guess reason could be device identification issue. Anyone knows how to solve this issue or any other approach to do deep linking in vue js?

Answer 1

userAgent.match() will return an Array type. Then in beforeCreate hook you're checking if those consts are strings, but they are arrays possibly carrying those strings inside them. You also perform similar checks in the created hook. That is probably why your statements never execute.