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/ ?

Answer 1

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.