CODEWITHSUNDEEP
javascriptvue.jsvue-routervuejs3vue-router4
刘嘉琪
刘嘉琪

Reputation: 169

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

This is my home page:

enter image description here

and this is my blog page:

enter image description here

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.

enter image description here

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

enter image description here

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

Upvotes: 0

Views: 1206

Answers (2)

vaibhav Prakash
vaibhav Prakash

Reputation: 101

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

Upvotes: 3

Nikola Pavicevic
Nikola Pavicevic

Reputation: 23480

You should use createWebHistory instead createWebHashHistory. More details here.

Upvotes: 3

Related Questions