Vue.js路由器鏈接動態更改

Question

我的項目中有多個模板，URL結構非常簡單。

/startpage/

/startpage/test_1

/startpage/test_2

在我的“ App.vue”中，我制作了一個模板，該模板顯示在項目的每個頁面上。 該模板包括一個按鈕，該按鈕的作用類似於“主頁”按鈕，名為“項目”。

App.vue

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

當我進入起始頁（ localhost:4545/#/startpage/ ）時，按鈕具有目標localhost:4545/#/startpage/ 。

但是當我在另一個頁面上時，例如localhost:4545/#/startpage/test_1 ，按鈕突然具有與我所在頁面相同的URL。

為什么路由器動態更改鏈接而不保留目標/startpage/ ？

Answer 1

如文檔所述 ，您是否需要使用綁定：

<!-- 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>

所以應該是您不需要使用: 或使用字符串文字。 當前，它嘗試將其用作變量，當然它不存在。