Question

每当我尝试使用简单的

<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
},

几天前一切正常，但是我必须添加一些可以改变这种行为的东西。我到处都看过，但似乎找不到所有出问题的地方。

Answer 1

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

Answer 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
)}

Answer 3

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

没有“/”

带“/”

Vue路由器附加相同的URL

3 个答案: