The URL routing in Vue-router seems to be incorrect as it directs to the wrong page. To fix this issue, make sure to include a '#' before the

Welcome to my website!

Check out my home page here: https://i.sstatic.net/znfq0.jpg

If you're interested in reading my blog, visit the blog page here: https://i.sstatic.net/oiYSY.png

I've built this site using vue3. Here's a snippet of the code:

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;

However, I encountered an issue with the routing. When I try to access the 'http://localhost:3000/blogs/' link, it redirects me to the home page instead of the blog page.

To fix this, I discovered that the link should be 'http://localhost:3000/#/blogs' for proper routing to the blog page. Check out the corrected link here: https://i.sstatic.net/1vFwE.png

It's a bit confusing why I have to include '/#/' before the actual path in the URL, but it resolves the routing issue.

Answer №1

To properly navigate, you must use '/#/' while using the createWebHashHistory() function. If there is no specific requirement to use createWebHashHistory(), it is recommended to use createWebHistory() instead.

For further information, please visit:

Answer №2

It is recommended to opt for createWebHistory over createWebHashHistory. For additional information, please refer to this link.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Transfer PHP's uniqid() function to real-time using JavaScript with jQuery

Seeking a compact JavaScript(jQuery) code snippet to achieve this: date("r",hexdec(substr(uniqid(),0,8))); Your assistance is highly appreciated. Thank you. ...

What is the best way to export multiple modules/namespaces with the same name from various files in typescript within index.d.ts?

I am currently in the process of creating a new npm package. I have two TypeScript files, each containing namespaces and modules with the same name 'X'. At the end of each file, I declared the following: export default X; My goal is to import bo ...

Tips for steering clear of global variables while coding in JavaScript

What is the best way to avoid using global variables in JavaScript? //load more var totalItems = $("#myList li").size(); var startIndex = 3; $('#myList li:lt(' + startIndex + ')').show(); $('.loadmore').on('cli ...

Connect an Angular Service object to a Controller's Scope and keeping it in sync

I am facing an issue with the interaction between my EmployeeService and EmployeeController. The service contains a specific object which I bind to the controller's scope: app.controller('EmployeeController', function($scope, EmployeeServic ...

What is the best way to include multiple action creators in a single listenerMiddleware in Redux Toolkit?

I am looking to store the current state in my database every time there is a change in any of its properties. I have implemented two middlewares to handle this task, each responsible for dispatching the saveTrip function. Although both middlewares are ide ...

Is there a way to distinguish mouseout/leave events based on the side in jQuery?

How can I detect if the mouse event has moved away from a particular side of an element? For example, I have a DIV with a mouseover/mouseenter event and I only want to activate the action when the mouse leaves from the left or right side of the DIV. If it ...

Utilize the power of AJAX and Laravel to seamlessly upload an Excel file

I am currently facing an issue with importing an Excel file using AJAX and Laravel in my application. The form of excel import is embedded within another form and I have observed that the error handling is not displaying the error messages correctly on the ...

What steps should I take to solve the issue of a black screen showing up once my React website has finished loading

Here's a photo showing error messages displayed on my website. Strangely, there are no errors appearing in my terminal and the website loads perfectly fine. However, I encountered some issues when trying to make styling changes using my dev tools. Aft ...

Unable to access the URL slug within the client component in Next.js version 13

In my upcoming project with Next 13, I have a client-side component that is being rendered under the route /journal/[date] Unfortunately, I'm facing an issue trying to extract the date from the URL. I attempted to use: import { useRouter } from &apos ...

Locate a JQuery element within another JQuery element

Apologies for my poor grasp of English. I am working with HTML and JavaScript. <noindex> <h1>This is h1 in noindex</h1> <div> <h1>This is h1 in noindex and in div</h1> <div> <h1>This is h1 in noindex a ...

The underscore convention for defining members in Typescript allows for clear and concise

Let's talk about a class called Email class Email { private _from: string; private _to: Array<string>; private _subject: string; } When an email object is created, it will look something like this: { _from:'', _to:'&apo ...

Generate a Selectpicker dynamically when a button is clicked

Wanting to insert a new row in an HTML table dynamically by clicking on an add button. The new row includes a select element with the selectpicker class. Interestingly, when I remove the selectpicker class in my script to append a new row, the select eleme ...

Fixed header in a div, allowing content to scroll when hovering over the header

How can I ensure that the header remains fixed at the top while allowing the content to scroll when hovered over? The current issue is that when a user hovers over the header and tries to scroll, the content does not move. body { margin: 0; ...

The transition from ExtJS 4 to ExtJS 5: A comprehensive guide

We're in the process of transitioning a web application from ExtJS 4 to ExtJS 5. Upon testing the index.html, we encountered an error message (displayed in the Firefox-FireBug-console): NetworkError: 404 Not Found - http://localhost:8080/ext/build/e ...

Creating an HTML table with collapsed borders and hidden rows/columns using the `border-collapse

I am facing a situation where I have a table with multiple lines as shown below: <table> <tr id="line1"><td>Line</td><td>1</td></tr> <tr id="line2"><td>Line</td><td>2</td></t ...

Customize your JQuery/HTML5 Slider to accept user input

Currently, I am developing a time tracking mobile application in MVC4, which includes the use of a slider input type. <input type="range" name="time_verdi" id="slider" value="7.5" min="0.0" max="24" step="0.5" data-highlight="true"/> When using thi ...

Comparing nestableSortable with the Nestable JavaScript library

I am in the process of developing a navigation menu editor that consists of multiple nested, sortable forms. My goal is to submit all the form data in one comprehensive JSON data blob. After researching, I have narrowed down my options to two libraries: n ...

Issue with Vue3: The imported module is not defined

Update: I recently downgraded vue-cli to version 4.5.19 and now the code is functioning properly. It seems like there might be an issue related to vue-cli or its dependencies. I encountered a problem while working on a simple vue.js project using vue-cli. ...

Creating a React component with a reference using TypeScript

Let's discuss a scenario with a reference: someReference; The someReference is essentially a React component structured like this: class SomeComponent<IProps> { getData = () => {}; render() { ...some content } } Now, how c ...

Is it possible to use JQuery ScrollTop while in the midst of an animation?

I am facing an issue with resizing containers and scrolling to elements. I have 2 containers that change width dynamically, each containing clickable elements. When a container is clicked, it animates the resize. However, when a clickable element is clicke ...