未生成名为 router-link 的 Vue.js答案

【问题标题】：Vue.js named router-link not generated未生成名为 router-link 的 Vue.js
【发布时间】：2020-05-07 13:59:30
【问题描述】：

我尝试使用<router-link> 生成指向视图的链接，但它没有生成正确的链接。

在 TS 组件中：

      <div id="nav">
        <ul class="menu-list">
          [...]
          <li><router-link to="{name: 'profile'}">Profile section 2</router-link></li>
          <li><router-link to="/about">About section</router-link></li>
        </ul>
      </div>

在router/index.ts：

import Profile from '../views/Profile.vue'

[...]
{
    path: '/profile',
    name: 'profile',
    component: Profile,
    props: true
  },
[...]

这是“生成”的链接：
<a data-v-25a8ea9c="" href="/ui/{name: 'profile'}" class="router-link-exact-active router-link-active">Profile section 2</a>
当然，该页面会显示我的自定义 404 错误。

About 链接生成良好：
<a data-v-25a8ea9c="" href="/ui/about" class="">About section</a>

【问题讨论】：

您应该使用:to="{name: 'profile'}"，但您没有添加冒号。

标签： vue.js vue-router

【解决方案1】：

您需要使用:to，但您使用的是不带冒号的to：

替换：

<li><router-link to="{name: 'profile'}">Profile section 2</router-link></li>

与：

<li><router-link :to="{name: 'profile'}">Profile section 2</router-link></li>

请注意我在to 之前添加的:。在没有前导 : 的情况下，您没有将 Vue 实例绑定到此元素，因此 Vue 路由器不会将其识别为有效路径。

【讨论】：