Creating dynamic URL routes for a static website using Vue

I am facing a challenge with my static site as I am unable to add rewrites through htaccess. Currently, our site is built using Vue on top of static .html templates such as \example\index.html. When I want to create a subpage within this layout, I have to manually create \example\subpage\index.html, and while it works fine when accessed via www.mywebsite.com/example/subpage/, I desire the ability to pull in data dynamically from an API feed with dynamic URLs like 

\example\subpage\any-page-name-here
.

The closest workaround I've discovered so far is by using the hash symbol (#) in the URL structure like 

\example\subpage#any-page-name-here
, allowing Vue to retrieve data based on the content after the # and make requests to the API.

If anyone has any suggestions or solutions that can be implemented purely using Vue/JS/HTML without altering the hosting limitations, your assistance would be highly appreciated. Thank you!

javascriptvue.js

Answer №1

If you find yourself unable to modify the web server configuration, your only options are either utilizing hashtags or query strings. For instance:

example.com/site/?dynamic-data

This limitation exists because the web server determines how to handle requests initially. In the absence of any custom configurations, it will either display a page if found or return a 404 error. This occurs before your Vue app gets called into action.

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

Tips for employing the slice approach in a data-table utilizing Vue

I have a unique situation in my Vue app where I'm utilizing v-data table. The current display of data in the table works fine, but I now want to enhance it by incorporating the slice method. Here is the current data displayed in the table: And here ...

javascriptvue.jsdatatableslice

Experiencing issues with a blank or non-functional DataGrid in Material UI components

My DataGrid table is showing blank. I experienced the same problem in a previous project and recreated it in a new one with updated versions of django and mui libraries. Here is an example of my data displayed with DataGrid not working I posted a bug rep ...

javascriptmaterial-uidatagrid

Do ES6 features get transpiled into ES5 when utilized in TypeScript?

After implementing ES6 features such as template strings, arrow functions, and destructuring in a TypeScript file, I compile the code to regular JavaScript... Does the TypeScript compiler also compile the ES6 syntax, or do I need to utilize another compil ...

javascripttypescriptecmascript-6

There seems to be an issue with the pastebin api createPasteFromFile method as it is showing an error of 'create

I'm currently working on a logging system using node for a twitch chat. The idea is that when you type "!logs user" in the chat, it should upload the corresponding user.txt file to pastebin and provide a link to it in the chat. For this project, I am ...

javascriptnode.jspastebin

Ways to design each element in React

I'm currently working on a React code that involves CSS for Scrolling functionality. When I try to use props.children.map, I encounter an error saying "TypeError: props.children.map is not a function". Since I am in the process of learning React.js, t ...

javascriptreactjsmap-function

Preventing Users from Accessing NodeJS Express Routes: A Guide

Currently, I am working on a React application where I am utilizing Express to handle database queries and other functions. When trying to retrieve data for a specific user through the express routes like so: app.get("/u/:id", function(req, res) { ...

javascriptnode.jsreactjsexpress

verify whether the image source has been altered

There is an img tag displaying the user's avatar. When they click a button to edit the image and choose a new one, the src attribute of the img changes to the new image src. How can I detect when the src changes? Below is the code for the button tha ...

javascriptjqueryimagesrc

What is the method for transferring the value of a jQuery variable to a PHP variable without using AJAX?

Here is my JavaScript code: $('#affiliates_name').change(function(){ var id = $('#affiliates_name').val(); }); Below is the corresponding HTML: <select id="affiliates_name" style="display: none;" name="affiliates_name"> < ...

javascriptphpjqueryajax

Looking to switch up the hide/show toggle animation?

Currently, I have a functioning element with the following code. It involves an object named #obj1 that remains hidden upon page load but becomes visible when #obj2 is clicked. #obj1{ position:fixed; width:100px; bottom:180px; right:10 ...

javascriptjquerycss

What is the purpose of assigning controller variables to "this" in AngularJS?

Currently, I am analyzing an example in CodeSchool's "Staying Sharp with Angular" course in section 1.5. Here is the code snippet: angular.module('NoteWrangler') .controller('NotesIndexController', function($http) { var contro ...

javascriptangularjsthis

AngularJS animation fails to activate

I've been working on a simple AngularJS application and I'm trying to add animations between my views. However, for some reason, the animation is not triggering despite following the tutorial on the AngularJS website. There are no errors in the c ...

javascriptangularjsanimation

Tips for effectively eliminating errors in a redux store

Within my react-redux application, I have implemented a system to catch error responses from redux-saga. These errors are saved in the redux-store and rendered in the component. However, a major challenge arises when trying to remove these errors upon comp ...

javascriptreactjsreduxreact-reduxredux-saga

Use two fingers to scroll up and down on the screen

I am currently developing a sketch web application (using angular) that utilizes one finger gestures for drawing. My goal is to enable vertical scrolling in the sketch content by using two fingers. However, when attempting to scroll with two fingers, Safa ...

javascripthtmlmobilescrollsafari

AngularJS ng-map defines the view position using rectangular coordinates

Is there a way to set the position of ng-map view using the ng-map directive not as the center value of [40.74, -74.18], but instead as a rectangle defined by the corner values of the map view (north, south, east, west)? Currently, I have this code: < ...

javascriptangularjsgoogle-mapsng-map

Identifying a change in the source location of an iframe element

I am working with an iframe object that is currently set to a specific page's URL. Here is an example: <iframe src="http://en.wikipedia.org/wiki/Special:Random"></iframe> My goal is to display an alert whenever the location of the iframe ...

javascripthtmlcss

How can two unique links toggle the visibility of divs with two specific IDs?

I am developing an interactive questionnaire that functions like a 'create your own adventure' story. The questions are shown or hidden depending on the user's responses. Below is the HTML code: <!-- TIER 3 ============================== ...

javascriptjqueryhtmlcss

What situations warrant the use of unescaped !{} in pug for string interpolation?

Is there a practical application for utilizing !{} - string interpolation in an unescaped format, despite the potential risks associated with its use? I have reviewed the information provided at these sources: Using !{ } and #{ } interpolation in a jade ...

javascriptnode.jspug

Inquiry regarding the process of object creation in JavaScript

I recently discovered a method to create your own 'class' as shown below: function Person(name, age){ this.name = name; this.age = age; } Person.prototype.foo = function(){ // do something } Person.prototype.foo2 = function(){ ...

javascript

"document.createElement encounters an issue when used for creating a new window

I am currently working with two different HTML files: FirstWindow and SecondWindow. The FirstWindow is linked to FirstWindowJS.js, while the SecondWindow is linked to SecondWindowJS.js. The issue arises when I try to open SecondWindow.html using FirstWind ...

javascript

Having trouble updating the state value using useState in React with Material-UI

I have developed a unique custom dialog component using Material-UI const CustomDialog = (props) => { const [dialogOpenState, setOpen] = React.useState(props.dilaogOpenProp); return ( <> <CssBaseline /> <Dialog ...

javascriptreactjsreact-hooksmaterial-ui