Vue-Router 工作但不能将路由器链接转换为锚标记

Posted 2023-02-23

【中文标题】Vue-Router 工作但不能将路由器链接转换为锚标记

【英文标题】：Vue-Router working but not transform router-link to anchor tag

【发布时间】：2020-01-13 05:47:07

【问题描述】：

vue-router 运行良好，但 <router-link to="/path">Link</router-link> 元素不会呈现为 <a href="/path">Link</a>，而只是呈现为纯文本 Link。让我给你看我的代码：

index.html

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

app.js

const Vue = require('vue');
import VueRouter from 'vue-router';
Vue.use(VueRouter);

//routing stuff
import GMap from './components/g-map.vue';
import Home from './components/home.vue';

const router = new VueRouter(
  routes: [
    path: '/', component: Home ,
    path: '/g-map', component: GMap 
  ]
);

new Vue(
  router
).$mount('#wrapper');

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" );
    
  
;

g-map.vue

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

<script>
export default ;
</script>

home 组件在开始时呈现（因为在路由中有一个路径 /），在加载的站点上我可以看到 text“链接”和可点击链接“另一个链接”。该网站的来源如下所示：

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

点击文本“链接”什么都不做，点击“另一个链接”调用成功testVueRoute方法和g-map组件的内容出现。

Vue-route 做得很好，因为 this.$router.push( path: "g-map" ); 效果很好，但为什么 <router-link to="/path">Link</router-link> 元素没有渲染到 a 标签？

【问题讨论】：

网站上呈现的输出是什么？ IE。 <router-link> 的来源给你什么？此外，尝试使用g-map 而不是/g-map，同时将name: 'G-map'（或任何您的组件名称）添加到routes[ ]

@Bram 在网站上呈现的输出是纯文本Link（没有任何标签）。从 /g-map 中删除斜线没有任何改变。

您确实为routes[ ]中的每条路线添加了一个名称？

是的，我尝试了使用路由名称，但没有效果。

【参考方案1】：

在您的路由器链接中包含 tag 属性 - 如下所示：<router-link tag="a" to="/g-map">Link</router-link>

【讨论】：

没有改变:(

如果您使用的是 vue-devtools，请直接从浏览器访问 /g-map 链接，看看该路线是否显示在那里。

我有 vue-devtools，Routing 选项卡中有 2 个路径 - / 和 /g-map。我不确定“直接从浏览器访问 /g-map 链接”是什么意思？只需将网站 url 与 /g-map 连接（如 lcalhost:8080/g-map）？

是的。但是该路线显示在 devtools 中，因此它似乎已注册。你试过<router-link exact tag="a" to="/g-map">Link</router-link>或<router-link tag="a" :to=" path: 'g-map' ">Link</router-link>吗？另外，为了消除一些变量，为home 路径设置router-link。这行得通吗？

不幸的是，这些都不起作用。 <router-link> 元素仍然呈现为纯文本，而不是锚标记。

【参考方案2】：

试试这样。 <router-link :to=" name: 'your name here' " class="btn btn-primary">Create Catgeory</router-link>

并在应用 js 中添加这样的名称。

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

【参考方案3】：

根据this topic，解决方案是将vue和vue-router包更新到最新版本（可能你也必须更新vue-template-compiler）。