CODEWITHSUNDEEP
vue.jsvue-router
Bruno Francisco
Bruno Francisco

Reputation: 4210

Vue-router appending the same URL

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.

Upvotes: 3

Views: 4513

Answers (3)

whatif
whatif

Reputation: 41

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

enter image description here

Without "/"

enter image description here

With "/"

enter image description here

Upvotes: 2

Akolade Adesanmi
Akolade Adesanmi

Reputation: 1250

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

Upvotes: 3

Screll
Screll

Reputation: 286

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

Upvotes: 4

Related Questions