Vue-router and middleman combination displaying '404 Error' upon page refresh

Question

Vue-router and middleman combination displaying '404 Error' upon page refresh

I'm in the process of developing a website that utilizes Middleman (Ruby) on the backend and VueJS on the front end, with vue-router managing routing. Specifically, in my vue-router configuration, I am rendering the Video component on /chapter/:id as shown below:

const routes = [
  {
    name: 'chapter',
    path: '/chapter/:id',
    component: Video,
    props: true
  },
]

When navigating using <router-link>, everything functions correctly. However, upon page reload (e.g., /chapter/2), it displays 'File Not Found' from Middleman.

Is there a way to disable routing within Middleman?

Any assistance would be much appreciated! Thank you

javascript vue.js vue-router middleman middleman-4

Answer 1

Answer №1

Customize your backend settings to serve index.html when accessing the link chapter/:id, or any other address not in your backend api list.

When utilizing a single-page-app developed with vue, the user remains within the index.html file, which contains a continuous running script such as app.js. As the route changes, the script detects this and updates the page content accordingly without leaving index.html. Therefore, upon reloading the page, the browser requests the html document from the server. Once the html is received with the embedded js script, it executes and determines the appropriate content to display based on the address/route, ensuring smooth functionality.

In your particular scenario, simply ensure that the browser retrieves the html file when navigating to /chapter/:id.

Answer 2

Customize your backend settings to serve index.html when accessing the link chapter/:id, or any other address not in your backend api list.

When utilizing a single-page-app developed with vue, the user remains within the index.html file, which contains a continuous running script such as app.js. As the route changes, the script detects this and updates the page content accordingly without leaving index.html. Therefore, upon reloading the page, the browser requests the html document from the server. Once the html is received with the embedded js script, it executes and determines the appropriate content to display based on the address/route, ensuring smooth functionality.

In your particular scenario, simply ensure that the browser retrieves the html file when navigating to /chapter/:id.

Vue-router and middleman combination displaying '404 Error' upon page refresh

Answer №1

Similar questions

Exploring ways to access data stored in interconnected models, such as MongoDB and NodeJS

Different Slide Library Fullpage.js

Guide to creating "bidirectional data binding" in Vue

Transforming a Vue array into columns using the modulo operator (%)

Obtaining a URL in JavaScript

The issue of memory leakage in Three.js

Unable to import the configuration module that is located three directories away in a Node.js environment

Using C# Razor Pages to send checkbox values via AJAX requests

Updating specific fields when using Put method with Restify and SQLite3

validation using ajax and php

The generation of React Native Jest coverage results may vary depending on how an ES6 module is exported

Performing a consistent influx of data into a MySQL database using Node.js encounters an issue: "Unable to enqueue Handshake as a Handshake has

Clickable div containing a hyperlink

The data type 'Event' cannot be assigned to the data type 'string' in this context

CSS to target every second visible tr element using the :nth-child(2n)

The connection to the firebase callback

React Component: Issue with conditional "if else" statement not refreshing in return statement

Implementing react router functionality with Material-UI tabs

When a directive generates an element, the ng-click function may not function as expected

Ways to categorize by a particular date