Vue.js集成Router后本地无显示，报TypeError错误求助

核心报错原因 #

控制台报错Cannot read properties of undefined (reading 'use')，根源是路由配置文件错误使用Vue3已废弃的API，同时存在语法和路由匹配问题。

问题排查与修复步骤 #

1. 路由配置文件API使用错误 #

错误代码（router/index.js）：

import vue from 'vue'
// ...
vue.use(createRouter,createWebHistory)

Vue3中不再通过默认导入的vue构造函数调用use方法，createRouter、createWebHistory是独立创建函数，无需提前通过use注册。

修复方案：直接删除上述两行代码，路由实例创建后在main.js中通过app.use(router)注册即可。

2. App.vue路由链接语法错误 #

错误代码：

<div class="li"><router-link to="/homePosts">Home</router-link</div>

<router-link>标签未闭合，缺少末尾的>。

修复方案：补全标签闭合：

<div class="li"><router-link to="/homePosts">Home</router-link></div>

3. 路由路径与导航链接不匹配 #

导航链接指向/homePosts，但路由配置中Home页面的path为/，导致点击链接后无法匹配对应路由页面。

修复方案（二选一）：

• 修改路由配置的path：将Home路由的path改为/homePosts
• 修改导航链接的to属性：将<router-link to="/homePosts">改为<router-link to="/">

修正后的完整代码 #

router/index.js #

import home from '../views/homePosts'
import writePost from '../views/writePost'
import { createRouter, createWebHistory } from 'vue-router'

const routes = [
    {
        name: 'Home',
        component: home,
        path: '/' // 若要匹配/homePosts，可改为path: '/homePosts'
    },
    {
        name: 'writepost',
        component: writePost,
        path: '/writePost'
    }
];

const router = createRouter({
    history: createWebHistory(),
    routes
})

export default router

App.vue #

<template>
  <div class="container">
    <div>
      <img class="img" src="@/assets/bloglogo.jpg">
    </div>
    <div class="nav-div">
        <navbar class="nav">
                <ul class="navbar">
                    <!-- 若路由path改为/homePosts，这里to保持/homePosts；否则改为to="/" -->
                    <div class="li"><router-link to="/">Home</router-link></div>
                    <div class="li"><router-link to="/writePost">Write a post</router-link></div>
                </ul>
        </navbar>
    </div>   
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
  export default {
    name: "App", 
}
</script>

main.js（无需修改） #

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

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

内容的提问来源于stack exchange，提问作者tocajossan