Question

在我之前的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>

在我的组件的方法中使用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那样简单？我错过了什么吗？

Answer 1

您知道吗？

我的解决方案是使用本地运行的Vue CLI 3创建的项目（我尚未构建我的项目）。

我的问题与您的相似。我只是想使用<a>链接在一个新选项卡上打开pdf文件，但是我的网址将单个哈希值连接到了我的路径，然后将我重定向到了我的主页。这是一个非常容易的修复程序：

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

只需一个点，正斜杠和我的文件名。我的文件位于根>公用文件夹下。

相对路径导入

使用相对路径引用静态资产时（必须以   。）在JavaScript，CSS或* .vue文件中，资产将包括在内   进入webpack的依赖图...

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

Answer 2

假设您具有Vue CLI默认生成的static文件夹，您只需将PDF放在其中，并按照<a href="./../static/file.pdf" target="_blank">进行操作。

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

2 个答案: