Vue-router中router-link无效，且查出多个vue版本

Question

在这样版本的vue下

不知道为什么不生效，如图：

代码如下：

<script setup>

</script>

<template>
<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 组件进行导航 -->
    <!-- 通过传递 `to` 来指定链接 -->
    <router-link to="/test">Go to test</router-link>

  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
  </div>
</template>

<style scoped>

</style>

其中路由配置如下：

import { createRouter, createWebHashHistory } from 'vue-router';

// 本地静态路由
export const constantRoutes = [
  // {
  //   path: '/login',
  //   component: () => import('@/views/login/index.vue'),
  //   meta: {
  //     isParentView: true,
  //   },
  // },
  {
    path: '/test',
    component: () => import('@/views/test/index.vue'),
  },
  // {
  //   // path: '/404',
  //   path: '/:pathMatch(.*)*', // 防止浏览器刷新时路由未找到警告提示: vue-router.mjs:35 [Vue Router warn]: No match found for location with path "/xxx"
  //   component: () => import('@/views/error-page/404.vue'),
  // },
];

// 创建路由
const router = createRouter({
  history: createWebHashHistory(),
  routes: constantRoutes,
});

export default router;

main.js中已引入：

现好奇为什么vue能查出来这么多版本以及为什么router-link跳转作用无法展示

Answer 1

让阿豪来帮你解答，本回答参考chatgpt3.5编写提供，如果还有疑问可以评论或留言

问题描述： 在 Vue 项目中，使用了 Vue Router，并在模板中使用了 router-link 组件进行导航。但是无法展示跳转作用。 问题分析：

1. 首先需要确认 Vue 和 Vue Router 的版本是否匹配，因为版本不一致可能会导致一些问题。可以查看 package.json 中的 dependencies，确认版本号是否一致。
2. 然后需要检查路由配置是否正确。建议在浏览器中通过路由地址进行访问，看是否能够正确展示对应的组件。如果不能展示，则需要检查路由配置是否有误。可以查看代码中的 constantRoutes 配置是否正确，包括路由地址和对应的组件是否正确。
3. 如果路由配置没有问题，那么可能是因为没有正确使用 router-link 组件。建议检查一下代码中的使用方式，看是否符合组件的使用方式。例如，检查是否正确传递 to 属性，以及是否正确嵌套在 标签内等。 解决方法：
4. 确认 Vue 和 Vue Router 的版本是否匹配，如果不一致需要进行版本升级或者降级，保持版本一致。
5. 检查路由配置是否正确，包括路由地址和对应的组件是否正确。可以在浏览器中直接访问路由地址进行检查。
6. 确认代码中 router-link 组件的使用是否正确，包括传递 to 属性、嵌套在 标签内等。可以参考官方文档进行修改。 解决案例： 根据提供的代码和截图来看，Vue 和 Vue Router 的版本已经匹配，路由地址也没有问题。因此，可能是 router-link 组件使用方式有问题。可以将 router-link 组件嵌套在 标签内，例如修改成以下代码：

<template>
  <div id="app">
    <h1>Hello App!</h1>
    <router-view>
      <router-link to="/test">Go to test</router-link>
    </router-view>
  </div>
</template>

这样就可以在页面中正确展示 router-link 组件，并实现跳转功能。