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

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;

所以，如果link是'http://localhost:3000/blogs/'，那应该是我的博客页面，结果是主页。

link必须是'http://localhost:3000/#/blogs'，这样才能路由到博客页面。

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

Answer 1

您应该使用 createWebHistory 而不是 createWebHashHistory。更多详情 here.

Answer 2

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

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

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

Vue-router routes to the wrong page, the link has to add a '#' before the path

javascript

vue.js

vue-router

vuejs3

vue-router4