how do I open a file when Vue.js router path is /apple-app-site-association

Question

I have a Vuejs project with the following folder structure https://ibb.co/dpGPBNw

I would like to open the file named apple-app-site-association inside the path static/config which is outside my src folder, using vue-router routing.

That means when a user redirects to https://myDomain/apple-app-site-association, the file static/config/apple-app-site-association should open up instead of routing to a component (which is how vue-router usually handles routing)

I require this for something called as deep-linking, i.e when a user navigates to https://myDomain/apple-app-site-association, the mobile app should open instead of navigating to the browser.

I do not know exactly how deep-linking works, but my mobile-app developer instructed that this is how we can achieve it.

Answer 1

As far as I know, Vue router, which is in charge of all routes within application, can't redirect you outside of it. You can, however, create component, that will only contain this specific document, and then you can point specific route to this component.
Regarding deep-linking it only means you get straight at some point within your app and not to the home page.

Answer 2

This is how I solved:

Option 1:

1. Create a component that will open the file:

<template>
  <div></div>
</template>

<script>
export default {
  name: 'WellKnown',
  props: {
    file: String
  },
  mounted () {
    window.open(this.file)
  }
}
</script>

2. Create a route in your vue router that uses that component and passes the file url:

  {
    path: '/.well-known/apple-app-site-association',
    component: WellKnown,
    props: {
      file: '<URL to your file>'
    }
  }

3. Deploy your app, whenever you go to <yourapp>/.well-known/apple-app-site-association you should be promp to download that file (the expected result)

Thats it.

Notes:

• The component created in step 1 receives the file URL as prop. That prop can be passed from the route definition it self.

• The file can be hosted whereever you want, what's important is that can be accesable from the url you defined in the router.

Option 2: This one is actually more straight forward. Place the file in your public directory:

And for the apple-app-site-association file change the content-type header to application/pkcs7-mime. More info here

Hope this makes sense and help others.