javascript - Vuejs 路由器链接动态变化

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

如 documentation 中所述，您要么需要使用绑定(bind)，要么不需要:

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

因此应该您不需要使用:，或使用字符串文字。目前它试图将其用作变量，当然它不存在。