当Vue.js路由器路径为/apple-app-site-association时，如何打开文件

Question

我有一个具有以下文件夹结构https://ibb.co/dpGPBNw的Vuejs项目

我想使用vue-router路由打开路径static/config中名为apple-app-site-association的文件，该路径位于我的src文件夹之外。

这意味着当用户重定向到https://myDomain/apple-app-site-association时，文件static/config/apple-app-site-association应该打开，而不是路由到组件(这是vue-router通常处理路由的方式)

我需要这个被称为deep-linking的东西，即当用户导航到https://myDomain/apple-app-site-association时，移动应用程序应该打开，而不是导航到浏览器。

我不知道deep-linking是如何工作的，但我的移动应用程序开发人员告诉我，这就是我们可以实现它的方式。

Answer 1

据我所知，Vue路由器负责应用程序内的所有路由，不能将您的重定向到它的之外。但是，您可以创建仅包含此特定文档的组件，然后您可以将特定路由指向此组件。

关于deep-linking，它只意味着你在你的应用程序中的某个点直接访问，而不是首页。

Answer 2

我是这样解决的：

选项1:

1. 创建将打开该文件的组件：

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

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

1. 在使用该组件的vue路由器中创建一条路由，并传递文件url:

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

1. 部署您应用程序，每当您转到<yourapp>/.well-known/apple-app-site-association时，系统都会提示您下载该文件(预期结果)

就是这样。

备注：

在步骤1中创建的组件

• 接收文件的URL作为prop。该属性可以从路由定义本身传递。

• 文件可以存放在您想要的任何位置，重要的是可以从您在路由器中定义的url进行访问。

选项2:这个选项实际上更直接。将文件放在您的公共目录中：

​

​

对于apple-app-site-association文件，将content-type标头更改为application/pkcs7-mime。更多信息here

希望这是有意义的，并帮助他人。