Vue-router 附加相同的 URL答案

【问题标题】：Vue-router appending the same URLVue-router 附加相同的 URL
【发布时间】：2019-10-27 06:17:57
【问题描述】：

每当我尝试使用简单的

<router-link to="https://google.com">
    Google
</router-link>

它将链接呈现到http://localhost:8080/https:/google.com

router.js

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
)}

我没有.env 文件。每当我创建.env 并添加BASE_URL=http://localhost:8080 时，它都会呈现http://localhost:8080/http:/localhost:8080/https:/google.com

有人遇到过这个问题吗？

更新上面的示例反映了外部网站，但内部链接也会发生这种情况。示例：

<router-link avatar :to="{name: 'author', params: {id: author.id, name: author.name}}"> foo </router-link>

定义作者路线

{
  path: '/author/:id/:name',
  name: 'author',
  component: Author
},

几天前一切正常，但我必须添加一些东西来改变这种行为。我到处寻找，但似乎找不到哪里出了问题。

【问题讨论】：

VueJs vue-router linking an external website的可能重复
不是重复的。我更新了答案以反映它不是一个重复
@Charlie 您需要使用author 路由的路由定义更新问题。
@Charlie 浏览器中生成的 URL 最终会成为您的 author 路由。是不是类似于http://localhost:8080/{name: 'author', params: {id: author.id, name: author.name}}？
@ceejayoz 作者的路线是：localhost:8080/author/348/Aaron%20Sorkin%0A 在router.js 定义base: undefined 解决了问题

标签： vue.js vue-router

【解决方案1】：

是的，对外部链接使用普通的<a href=""></a> a href 标签。 Vue-router 和 router-link 主要用于实例资源。

【讨论】：

我更新了答案，因为内部链接也会发生这种情况
@Charlie 确保您使用 :to 而不是 to 作为内部链接。

【解决方案2】：

此问题可能来自您的路由器。我猜process.env.BASE_URL 是http://localhost:8080。我遇到了类似的问题，然后我来到了这里。不幸的是，@screll 上面的步骤并没有解决我的问题。我所做的是更改 baseUrl。

将路由器中的 baseUrl 更改为“/”而不是 http://localhost:8080。

为清楚起见，这些步骤取决于项目设置，vue/cli or webpack setup

// .env file
BASE_URL=/
# or VUE_APP_BASE_URL=/

那么，路由器

// NB: The BASE_URL is '/'

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  // or base: process.env.VUE_APP_BASE_URL,
  routes
)}

【讨论】：

【解决方案3】：

不要忘记在您的路线中添加“/”。因此，它只会更改您网址的最后一段。

没有“/”

带“/”

【讨论】：