我用 vue.js 做了一个简单的博客来练习 vue.js。我安装了一个路由器，现在它不想在本地主机上显示任何东西。 我使用目录视图来放置要显示的文件，组件现在是空的。路由器是一个自己的目录，里面有一个文件 index.js，我将路由器连接到那里。 （我没有在此消息中包含样式）

这是控制台中的错误：

    app.js:378 Uncaught TypeError: Cannot read properties of undefined (reading 'use')
        at eval (index.js?5aa4:6:1)
        at ./src/router/index.js (app.js:96:1)
        at __webpack_require__ (app.js:375:33)
        at fn (app.js:609:21)
        at eval (main.js:4:65)
        at ./src/main.js (app.js:85:1)
        at __webpack_require__ (app.js:375:33)
        at app.js:1497:109
        at __webpack_require__.O (app.js:421:23)
        at app.js:1498:53

这是 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">
                        <div class="li"><router-link to="/homePosts">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')
    

这是路由器目录内的 index.js

        import vue from 'vue'
        import home from '../views/homePosts'
        import writePost from '../views/writePost'
        import { createRouter, createWebHistory } from 'vue-router'
        
        vue.use(createRouter,createWebHistory)
        const routes = [
            {
                name: 'Home',
                component: home,
                path: '/'
            },
            {
                name: 'writepost',
                component: writePost,
                path: '/writePost'
            }
            
        
        ];
        
        const router = createRouter({
            history: createWebHistory(),
            routes
        })
        
        export default router

其中一个视图文件；

    <template>
    <div class="post-container">
        <h1>Blog Posts</h1>
        <div class="post-mini-container"> 
            <div class="post">
                <img class="img-post" src="@/assets/person1.jpg">
                <h4>Blog headline here</h4>
                <h6>Writer name</h6>
            </div>
            <div>
                <h5 class="blog-text">Lorem 
                </h5>
            </div>
            <div class="read-me">
                <h6 class="read-more">Read more..</h6>
            </div>
        </div>
    </div>
    </template>
    
    <script>
     export default {
        name: 'homePosts'
     }
    </script>