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

javascriptvue.jsvue-routermiddlemanmiddleman-4

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.

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

Continuously update scrolling functionality

Could you please provide more information about the solution mentioned in the following question? I am facing a similar issue. jQuery’s css() lags when applied on scroll event Regarding solution #3 ->> To ensure continuous updates, it is suggested to t ...

javascriptjqueryscroll

setTimeout executes twice, even if it is cleared beforehand

I have a collection of images stored in the img/ directory named 1-13.jpg. My goal is to iterate through these images using a loop. The #next_container element is designed to pause the loop if it has already started, change the src attribute to the next im ...

javascripthtmlsettimeout

Creating an autocomplete feature with just one input field to display information for two to three additional input fields

I'm working on implementing an autocomplete feature similar to this example: . Feel free to test it out with the code snippets provided: 1000, 1001. I've successfully implemented the autocomplete functionality where typing in Pa suggests Paris. ...

javascriptphpjquerysqlajax

Using Selenium Webdriver to initiate the play function of a video by clicking on the control

Is there a way to play the video on this page by clicking the play button? I noticed a 'playpause' control in the JavaScript, but I'm unsure how to activate it. <div id="videoModal" class="reveal-modal expand open" style="display: block ...

javajavascriptseleniumselenium-webdriverwebdriver

Interactive selection menu with jquery technology

I am in the process of developing a dynamic dropdown feature using jQuery var rooms = $("<select />"); $(res.data).each(function () { var option = $("<option />"); option.html(this.name); op ...

javascriptjquery

Using React Native's stylesheet to apply multiple values in a CSS statement

Here's a scenario to help clarify my question: Imagine I want to add margin to an element in the following way: const myView = () => <View style={styles.viewStyle}></View> const styles = StyleSheet.create({ viewStyle: { margin: ...

javascriptcssreactjsreact-native

Tips for effectively utilizing axios without Vue.js CLI (for instance, in JS Fiddle)

Currently, I am immersing myself in the world of vue.js. To get a better understanding of the dependencies, I have chosen not to utilize the Vue cli just yet, opting for JS Fiddle instead. My next goal is to interact with an API using axios. Here is a glim ...

javascriptvue.jsaxiosjsfiddle

Creating a database using Angular2+ in CouchDB can be achieved by following these steps

I have been attempting to set up a database in couchdb using angular2+. My goal is to create a button that, when clicked, will initiate the creation of the database. However, I keep encountering an error message. "ERROR Error: Uncaught (in promise): H ...

javascriptangularcouchdb

The performance of my SVG Filter is dismal

Here is the SVG filter I am using: <svg style="visibility: hidden; height: 0; width: 0;"> <filter id="rgbShift"> <feOffset in="SourceGraphic" dx="1" dy="-1" result="text1" /> <feFlood flood-color="#FF0000" result=" ...

javascriptcsssvgsvg-filters

Incorporated asynchronous functionality, struggling to integrate it into the code

Previously, I used to utilize the following code for handling state: //get state MyClass.prototype.getState = function(key) { var value; switch(this._options.type){ case "cookie": value = $.cookie(key); ...

javascriptjqueryajax

What is the best way to combine a functional component with an HTML string when rendering a node?

I have a functional component that needs to render a child component (which is also functional) and an HTML string sibling to it within the same node. Here is the code snippet: const html = 'My<br>Value'; const ResponsiveLabel = render(&a ...

vue.js

The HTML embed element is utilized to display multimedia content within a webpage, encompassing

Currently, I am working on a static website for my Computer Networks course. Students need to be able to download homework files in PDF format from the website. I have used embed tags to display the files online, but I'm facing an issue where the embe ...

javascripthtmlcss

Tips for utilizing Sass and CSS Modules within create-react-app

I've been using FileName.module.scss to style my react elements like this: // Component styling with SCSS import React from "react"; import Aux from '../../hoc/Aux'; import classes from './Layout.module.scss'; const lay ...

javascriptreactjssasscreate-react-appcss-modules

Utilizing HTML and JavaScript to add grayscale effect to images within a table, with the ability to revert to the colored version upon mouseover

Seeking advice on utilizing the mouseover / mouseout event in javascript to implement grayscale on a table. The challenge requires creating a gray image grid (table) using HTML and then incorporating Javascript so that hovering over an image triggers it to ...

javascripthtmlonmouseovergrayscaleonmouseout

Combining two observable entities

Utilizing Angular 4 and rxjs, the objective is to fetch data from two distinct servers in JSON format, merge this data, and exhibit it in a list by associating the list with an observable array. **Word Search Component TypeScript File:** @Component( ...

javascriptangularrxjsobservable

Display or Conceal Sub-Header according to Scrolling Position

Question: My goal is to create a specific animation on my website. When loading the page on mobile, I want to display the div with ID "sub-header", but once the user scrolls more than 50px down, I want to hide it. Additionally, if the user scrolls up by 60 ...

javascriptjqueryhtmlcss

Get Subject Alternative Name from X.509 in a Node.js environment

Having trouble retrieving the SAN from a DoD Smart Card, as the subject alternative name is returning othername:<unsupported>. I have not been able to find many examples on how to parse this information. I would have thought that X509 li in node woul ...

javascriptnode.jssmartcardx509pki

Generate a custom website using React to display multiple copies of a single item dynamically

As a newcomer to React and web development, I've been pondering the possibility of creating dynamic webpages. Let's say I have a .json file containing information about various soccer leagues, structured like this: "api": { "results": 1376, ...

javascripthtmlreactjsurldynamic

Tips for implementing AngularJS on a webpage transfer

I am a beginner in learning AngularJS. I have gone through the basic tips on W3Schools, but now I am stuck on implementing the login function. When I click the "sign in" button, the webpage should redirect to the login page of the website. However, I am ...

javascriptangularjs

The click event is triggering before it is able to be removed by the code preceding the trigger

Here's a scenario I recently experienced that involves some code written using JQuery. It's more of a statement than a question, but I'm curious if others have encountered this as well: <input type="submit" value="Delete" o ...

javascriptjquery