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

Question

This is my home page:

and this is my blog page:

I'm using vue3, the code goes blow:

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;

So, if the link is 'http://localhost:3000/blogs/', it should be my blog page, but it turns out to be home page.

The link has to be 'http://localhost:3000/#/blogs', so it can be routing to the blog page.

I don't get why I have to write a '/#/', before the actual path!

Answer 1

You should use createWebHistory instead createWebHashHistory. More details here.

Answer 2

You will have to use '/#/' because you are using createWebHashHistory(), If there's no specific reason for using createWebHashHistory(), you should use createWebHistory() as it is the recommended way.

More info here: https://next.router.vuejs.org/guide/essentials/history-mode.html