不知道如何使用 Vue Router 访问第二个页面

Question

我正在尝试将 Vue Router 添加到我的一个项目中，以便能够在某些页面之间导航。

我不熟悉 Vue Router，所以我可能做错了什么。

import {createRouter, createWebHistory} from 'vue-router'
import App from '../App'
import Test from '../Views/Test'


const router = createRouter({
    history: createWebHistory(),
    routes: [
        {
            path:'',
            name: 'App',
            component: App,
        },
        {
            path:'/test',
            name: 'Test',
            component: Test
        }
    ]
})
export default router

这是我的index.js 文件。我的问题是，当我运行我的代码时，我可以毫无问题地看到我的 App 页面，但是当我手动转到 http://localhost:8080/test 时，我有一个错误提示该页面尚未找到

你能帮我解决这个问题吗？

谢谢！

---

更新

我已经更改了一些内容，现在我可以访问我的页面，但只能使用路由器链接。 我添加了一个First.vue 页面，我可以在其中选择转到我的App.vue 或我的Test.vue。

我的First.vue：

<template>
    <router-view></router-view>
    
    <router-link to='/app'>Go to application</router-link>
    <br>
    <router-link to='/test'>Go to test</router-link>
    
</template>

我的 ìindex.js` 现在看起来像这样：

import {createRouter, createWebHistory} from 'vue-router'
import App from '../App.vue'
import Test from '../Views/Test.vue'
import First from '../Views/First.vue'


const router = createRouter({
    history: createWebHistory(),
    routes: [
        {
            path:'/',
            name: 'First',
            component: First,
        },
        {
            path:'/test',
            name: 'Test',
            component: Test
        },
        {
            path:'/app',
            name: 'App',
            component: App
        }
    ]
})
export default router

Answer 1

分析您的沙盒后，我认为问题在于您的导出和导入语句，它们不匹配。

如果你像这样导出你的模块：

export const router = createRouter({
  ...
});

import 语句应该是

import { router } from "./router/index";

如果你像这样导出你的模块：

const router = createRouter({
  ...
});
export default router;

import 语句应该是

import router from "./router/index";