Vuejs router-link changes dynamically

Question

I have multiple templates in my project, with a fairly simple url structure.

/startpage/

/startpage/test_1

/startpage/test_2

In my 'App.vue' I made a template, which is shown on every page in my project. That template includes a button, which is supposed to act like a 'Home' button, named 'Projects'.

App.vue

<template>
  <div>
    <div>
      <router-link :to="/startpage/"><button class="Project">Projects</button></router-link>
    </div>
    <router-view/>
  </div>
</template>

When I'm on the startpage (localhost:4545/#/startpage/), the button has the target localhost:4545/#/startpage/.

But when I'm on another page, for example localhost:4545/#/startpage/test_1, the button suddenly has the same url as the page I'm on.

Why does the router change the link dynamically and not keep the target /startpage/?

@OliCrt Thank you very much! That works! I thought the ':' were necessary for the router-link tag. — LLJ97
– LLJ97, Commented Jul 13, 2018 at 9:26

Andrey Popov · Accepted Answer · 2018-07-13 09:27:12Z

2

As described in the documentation, you either need to use binding or not:

<!-- literal string -->
<router-link to="home">Home</router-link>
<!-- renders to -->
<a href="home">Home</a>

<!-- javascript expression using `v-bind` -->
<router-link v-bind:to="'home'">Home</router-link>

<!-- Omitting `v-bind` is fine, just as binding any other prop -->
<router-link :to="'home'">Home</router-link>

So it should be that you don't need to use :, or use a string literal. Currently it tries to use it as a variable, which of course it not present.

answered Jul 13, 2018 at 9:27

Andrey Popov

7,5404 gold badges45 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vuejs router-link changes dynamically

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related