时间戳

首页 > 解决方案 > 未生成名为 router-link 的 Vue.js

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

问题描述

我尝试使用<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>

标签： vue.jsvue-router

解决方案

您需要使用: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 路由器不会将其识别为有效路径。

推荐阅读