Vuejs 路由器链接动态变化答案

【问题标题】：Vuejs router-link changes dynamicallyVuejs 路由器链接动态变化
【发布时间】：2018-07-13 09:10:36
【问题描述】：

我的项目中有多个模板，具有相当简单的 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/？

【问题讨论】：

你试过去掉斜杠吗？
是的。当我转到不同的页面时，它仍然会发生变化。
如果你去掉前面的“:”会发生什么？
不带任何斜线试试怎么样
@OliCrt 非常感谢！这样可行！我认为'：'对于路由器链接标签是必需的。

标签： javascript vue.js

【解决方案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>

所以应该是你不需要使用:，或使用字符串文字。目前它尝试将其用作变量，当然它不存在。

【讨论】：