Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Trailing slash causing routes to be nested #3014

Closed
tettoffensive opened this issue Oct 30, 2019 · 1 comment

Comments

@tettoffensive
Copy link

@tettoffensive tettoffensive commented Oct 30, 2019

Version

3.0.7

Reproduction link

https://codesandbox.io/embed/vue-router-trailing-slash-bug-rwsbj

Steps to reproduce

  1. Have 2 routes specified like '/services' and '/guide'
  2. Click on a link that routes to services. (address bar should say http://localhost:8081/services)
  3. Refresh the page (used Brave browser) and you should see a trailing slash added in the address bar (e.g., http://localhost:8081/services/)
    3b. In CodeSandbox it is necessary add trailing slash manually
  4. Click on a link that goes to '/guide'
  5. Address bar now shows http://localhost:8081/services/guide instead of http://localhost:8081/guide

What is expected?

Route should go to http://localhost:8081/guide

What is actually happening?

Route is going to http://localhost:8081/services/guide which does not exist.


I've noticed an issue with 'vue-router' where if there's an extra '/' on the end of my current url, the other sibling routes think they're nested inside.

I have 2 routes with paths '/services' and '/guide' Normally, when the address bar says 'http://localhost:8081/services', the other link takes me to http://localhost:8081/guides', BUT if it says 'http://localhost:8081/services/' (which seems to happen when i refresh), then it takes me to http://localhost:8081/services/guides'

Anyone know what might cause this?

@posva

This comment has been minimized.

Copy link
Member

@posva posva commented Oct 31, 2019

This is because you are using a relative path:

<router-link to="guide">Guide</router-link>

You need to put the leading slash:

<router-link to="/guide">Guide</router-link>
@posva posva closed this Oct 31, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.