CODEWITHSUNDEEP
javascriptvue.js
LLJ97
LLJ97

Reputation: 500

Vuejs router-link changes dynamically

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

Upvotes: 1

Views: 431

Answers (1)

Andrey Popov
Andrey Popov

Reputation: 7510

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.

Upvotes: 2

Related Questions