主页 / coding / 问题 / 79214745
Accepted
bilpor
Asked: 2024-11-22 19:05:53 +0800 CST

vue.js 我在配置 vue 路由器时遇到问题

  • 772

我尝试按照互联网上的许多示例进行操作，但显然遗漏了一些东西。我安装了 4.4.5 版的 vue-router 包。

这是我的项目结构：在此处输入图片描述

在我的 index.ts 文件中我有：

import { createRouter, createWebHistory } from 'vue-router';
import HomeView from '../views/HomeView.vue';
import AboutView from '../views/AboutView.vue';

const routes = [
  { path: '/', name: 'home', component: HomeView },
  { path: '/about', name: 'about', component: AboutView }
];

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
});

export default router;

我的 MenuComponent 有：

<template>
  <nav>
    <router-link to="/">Home</router-link>
    <router-link to="/about"> About</router-link>
  </nav>
 
</template>

<script lang="ts">
  
  export default {
    name: 'MenuComponent'
  };
</script>

<style>
  .router-link-active {
    font-weight: bold;
  }
</style>

在 App.vue 中我有：

<script setup lang="ts">
  import { RouterLink, RouterView } from 'vue-router';

  import MenuComponent from './components/MenuComponent.vue';
  
</script>

<template>
  <header>
    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
    <MenuComponent />
    
  </header>

 <router-view />
</template>

我的 main.ts 文件是：

import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

现在，当我运行应用程序时，页面会加载，但当我单击其中一个链接时，我不会重定向到该页面。在开发人员工具中，它显示以下错误，我看不出我做错了什么：

在此处输入图片描述

vue.js

1 个回答

  1. Best Answer

    您尚未注册路由器。请参阅文档中的注册路由器插件部分。

    在main.ts中：

    import router from '@/router' // 👈

//...
createApp(App)
  .use(router)  // 👈
  .mount('#app')

    来自文档：

    如果你对这个插件的功能感到好奇，它的一些职责包括：

    • 全局注册 RouterView 和 RouterLink 组件。
    • 添加全局$router和$route属性。
    • 启用useRouter()和useRoute()可组合项。
    • 触发路由器解析初始路由。
    • 2

相关问题