Vue-router appending the same URL

Question

Whenever I try to use a simple

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

it renders the link to http://localhost:8080/https:/google.com

router.js

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

and I have no .env file. Whenever I create the .env and add BASE_URL=http://localhost:8080 it renders http://localhost:8080/http:/localhost:8080/https:/google.com

Have anyone experienced this issue?

UPDATE The example above reflects external websites but this is also happening with internal links. Example:

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

definition author's route

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

Everything was working okay some days ago but there must be something I added that changed this behaviour. I have looked everywhere but can't seem to find where all went wrong.

Possible duplicate of [VueJs vue-router linking an external website](https://stackoverflow.com/questions/50633001/vuejs-vue-router-linking-an-external-website) — Screll, Jun 12 '19 at 17:14
It's not a duplicated. I updated the answer to reflect how it's not a dup — Bruno Francisco, Jun 12 '19 at 17:17
@Charlie You need to update the question with your route definition for the `author` route, then. — ceejayoz, Jun 12 '19 at 17:21
@Charlie Also what the resulting URL in the browser winds up being for your `author` route. Is it something like `http://localhost:8080/{name: 'author', params: {id: author.id, name: author.name}}`? — ceejayoz, Jun 12 '19 at 17:22
@ceejayoz the route for the author is: http://localhost:8080/author/348/Aaron%20Sorkin%0A Defining `base: undefined` at `router.js` solved the problem — Bruno Francisco, Jun 12 '19 at 17:29

score 4 · Accepted Answer · answered Jun 12 '19 at 17:12

4

Yes, use a normal <a href=""></a> a href tag for external links. Vue-router and router-link are primarily for instance resources.

answered Jun 12 '19 at 17:12

Screll

266
2
12

I updated the answer because this also happens with internal links – Bruno Francisco Jun 12 '19 at 17:18
@Charlie Make sure you're using `:to` and not `to` for the internal links. – ceejayoz Jun 12 '19 at 17:23

score 3 · Answer 2 · answered Sep 23 '20 at 08:35

This problem could be from your router. I'm guessing the process.env.BASE_URL would be http://localhost:8080. I faced similar problem then I ended up here. Unfortunately, the step above by @screll didn't solve my problem. What I did was to change the baseUrl.

Change the baseUrl in your router to '/' instead of http://localhost:8080.

For clarity, These are the steps depending on the project setup, either vue/cli or webpack setup

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

Then, Router

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

score 2 · Answer 3 · answered Mar 17 '21 at 02:49

2

Do not forget to put "/" in your routes. Hence, it will just change the last segment of your url.

Without "/"

With "/"

answered Mar 17 '21 at 02:49

whatif

41
2

Vue-router appending the same URL

3 Answers3