使用 VueJS 在另一个窗口中打开 PDF 文件

在我之前的 Angular 应用程序中，我能够在另一个窗口中打开我的简历，如下所示：

<a class="link popup" href="javascript:void(0);" onclick="javascipt:window.open('./../../assets/Resume_Christopher_Kade.pdf');">Resume</a>

在用 Vue 重写我的网站时，我注意到它没有按预期工作，将其更改为：

<a class="link popup" href="javascript:void(0);" v-on:click="openPdf()">Resume</a>

With openPdf()在我的组件的方法中：

openPdf () {
    javascipt:window.open('./../assets/Resume_Christopher_Kade.pdf');
}

单击该链接时，将打开一个新页面，网址为：

http://localhost:8080/assets/Resume_Christopher_Kade.pdf

同时在屏幕上显示空路线，而不是在浏览器的 pdf 查看器中显示 pdf。

这个问题可能与我在 Vue 中处理路由的方式有关：

export default new Router({
  mode: 'history',
  routes: [    
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/work',
      name: 'Work',
      component: Work
    },
    {
      path: '/posts',
      name: 'Posts',
      component: Posts
    },
    { path: '*', component: Home }
  ]
})

为什么它不像 Angular 那样简单？我错过了什么吗？

你弄清楚了吗？

我的解决方案适用于使用本地运行的 Vue CLI 3 创建的项目（我还没有构建我的项目）。

我的问题和你的很相似。我只是想<a>在新选项卡上打开我的 pdf 文件的链接，但我的 url 将单个哈希连接到我的路径并将我重定向到我的主页。这是一个非常简单的修复：

<a href="./resume.pdf" target="_blank">resume</a>

只是一个点、正斜杠和我的文件名。我的文件位于 root > public 文件夹下。

相对路径导入

当您使用相对路径引用静态资源时（必须以 .) 在 JavaScript、CSS 或 *.vue 文件中，资源将被包含 进入 webpack 的依赖关系图...

https://cli.vuejs.org/guide/html-and-static-assets.html#relative-path-imports