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中所述，您是否需要使用绑定：

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

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

Vue.js路由器链接动态更改

1 个答案: