Html Vue路由器正在工作，但未将路由器链接转换为锚标记

vue路由器

工作正常，但是

Link

元素没有呈现到

而只是呈现到纯文本

Link

。让我向您展示我的代码：

index.html

<div id="wrapper">
  <!-- Content -->
  <router-view></router-view>
</div>

home.vue

<template id="home">
    <div>
        <!-- some stuff -->
        <router-link to="/g-map">Link</router-link>
        <a href="#" @click="testVueRoute">Another link</a>
    </div>
</template>

<script>
export default {
  methods: {
    testVueRoute() {
      this.$router.push({ path: "g-map" });
    }
  }
};

<template id="g-map">
  <div>SOME CONTENT FROM G-MAP</div>
</template>

<script>
export default {};
</script>

点击文本“Link”不起任何作用，点击“另一个Link”调用成功

testVueRoute

方法，并显示

g-map

组件的内容

---

Vue路由执行作业，因为

this.$router.push（{path:“g-map”}）

工作正常，但是为什么

链接

元素没有呈现给

标记？
在路由器链接中包含标记属性-如下所示：
链接
尝试这样做<代码>创建Catgeory

在应用程序js中添加如下名称

{
      name: 'home',
      path: '/',
      component: HomeComponent
}

---

据了解，解决方案是将

vue

和

vue路由器

包更新为最新版本（可能您也必须更新

vue模板编译器

）

网站上呈现的输出是什么？例如，源代码为

提供了什么？此外，尝试使用

g-map

而不是

/g-map

，同时将

名称：“g-map”

（或任何组件名称）添加到

路由[]

@Bram。网站上呈现的输出为纯文本

链接

（无任何标记）。从

/g-map

删除斜杠未发生任何更改。您确实在

路线[]

中为每条路线添加了名称？是的，我尝试了路线名称，但没有效果。未发生任何更改：（如果您使用的是vue devtools，请直接从浏览器访问

/g-map

链接，查看路线是否显示在那里。我有vue devtools，在

路由

选项卡-

/

和

/g-map

中有两条路径。我不确定“直接从浏览器访问/g-map链接”是什么意思。）？只需将网站url与/g-map连接（如lcalhost:8080/g-map）？是的。但是路由显示在devtools中，因此它似乎已注册。您是否尝试过

链接

或

链接

？另外，为了消除一些变量，我们为

主路径

设置了一个

路由器链接

。这有效吗？不幸的是，这些都不起作用。

元素仍然呈现为纯文本，not到锚定标签。

<div>
    <!-- some stuff -->
    Link
    <a href="#">Another link</a>
</div>

{
      name: 'home',
      path: '/',
      component: HomeComponent
}