javascript - Vue-router路由到错误的页面，链接必须在路径前添加'#'

Question

这是我的主页：

这是我的博客页面：

我正在使用 vue3，代码失败了：

import { createRouter, createWebHashHistory } from 'vue-router';
import Home from '../views/Home.vue';
import Blogs from '../views/Blogs.vue';


const routes = [
    { path: '/', component: Home},
    { path: '/home', name: 'Home', component: Home },
    { path: '/blogs', name: 'Blogs', component: Blogs },

];

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

export default router;

所以，如果链接是'http://localhost:3000/blogs/'，它应该是我的博客页面，但结果却是主页。

该链接必须是“http://localhost:3000/#/blogs”，因此它可以路由到博客页面。

我不明白为什么我必须在实际路径之前写一个'/#/'！

Answer 1

你应该createWebHistory改用createWebHashHistory. 更多细节在这里。

Answer 2

您将不得不使用 '/#/' 因为您正在使用createWebHashHistory()，如果没有使用的具体原因createWebHashHistory()，您应该使用createWebHistory()它，因为它是推荐的方式。

更多信息： https ://next.router.vuejs.org/guide/essentials/history-mode.html