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

Error: pos variable is not defined

I encountered a TypeError: pos is undefined while running the code below. $(document).ready(function() { var s = $("#col-scroll"); var pos = s.position(); $(window).scroll(function() { var windowpos = $(window).scrol ...

javascriptjquery

Leaflet setStyle changes are effective when applied through the console but do not reflect in the actual

I currently have a map with around 1000 polygons that I am loading onto it. My goal is to color these polygons based on a specific property value. The code snippet below showcases my approach, but the results are not as expected. mapLayerFieldGrid = new L ...

javascriptleaflet

The mistake is indicating the npm title of a package that is not present

https://i.sstatic.net/5bywN.png An issue has arisen - the module cannot be found, even though such a module does not actually exist. The correct module name should be babel-plugin-proposal-class-properties (and the error is showing as 'babel-plugin-t ...

javascriptnpmwebpackpackagepackage.json

Tips on ensuring Angular calls you back once the view is ready

My issue arises when I update a dropdown list on one of my pages and need to trigger a refresh method on this dropdown upon updating the items. Unfortunately, I am unsure how to capture an event for this specific scenario. It seems like enlisting Angular ...

javascriptjqueryangularjstwitter-bootstrap

Using JavaScript, create a set of buttons within a div element and implement

$(document).ready(function() { $('#b1').click(function() { $('#uch').toggle("slow"); }); $('#b2').click(function() { $('#uch2').toggle("slow"); }) }) Although I'm not a program ...

javascriptjqueryhtmlcssfunction

Techniques for manipulating multiple circles with JavaScript

After creating a series of circles with d3, I successfully implemented the functionality to drag individual circles and track their positions. var width= 800; var height=600; svg= d3.select("body").select(".div1").append("svg") ...

javascriptd3.js

Pins missing from Google Maps API display

TLDR: The problem lies within the var marker = new google.maps.Marker() line. It seems that either the pins are not visible, incorrect, or simply not appearing. Background: I have implemented some JavaScript code that utilizes AJAX to fetch data on the ...

javascriptajaxgoogle-mapsgoogle-maps-api-3

I am looking to view all products that belong to the category with the ID specified in the request, and have red-colored stocks

Within my database, I have defined three mongoose models: Product, Category, and Stock. The Product model contains two arrays - categories and stocks, each including respective category and stock ids. My goal is to retrieve all products where the category_ ...

javascriptnode.jsexpressmongoose-schema

Angular app - static List mysteriously clears out upon refresh

My goal is to create a login page using Angular. I have an Angular component with HTML, CSS, and TypeScript files that manage this functionality. The HTML file contains two fields (Username and Password) and two buttons (Login and Register). When a user en ...

javascripthtmlangulartypescript

React error: File undefined (cannot be exported)

Encountering an issue while attempting to follow a tutorial: src/components/MyApp.js Line 17:18: 'myApp' is not defined no-undef Search for the keywords to learn more about each error. This is what my myApp.js file contains: import React fr ...

javascriptreactjs

Utilizing Redux-Form to Retrieve Input Values

When a radio button is clicked, I want to display a form using redux-form. I tried following a tutorial that uses checkboxes but couldn't figure out how to implement it with radio buttons. The tutorial link is selectingformvalues. I have 2 radio butt ...

javascriptreactjsreduxredux-form

How can I detect the scroll action on a Select2 dropdown?

Is there a way to capture the scrolling event for an HTML element that is using Select2? I need to be able to dynamically add options to my dropdown when it scrolls. Just so you know: I am using jQuery, and the dropdown is implemented with Select2. The ...

javascriptjqueryjquery-select2

Is there a way to have two SVG files displayed on a single HTML page at the same time

Currently, I am facing an issue with my graphs. I have a line graph and a boxplot, but the boxplot is appearing below the line graph when I want it to be next to it. Any suggestions on how I can achieve this layout? Thank you! I attempted to use 2 differe ...

javascripthtmlcssd3.jssvg

Error: Unable to access _rawValidators property of null object

I'm currently facing an issue with formgroup and formcontrol in Angular. When I run ng serve, it's showing an error in the console. Does anyone have a solution for this? TypeError: Cannot read properties of null (reading '_rawValidators&a ...

javascriptangulartypescript

Retrieve an uninitialized variable in Laravel using axios.post method within the Vue.js module

Hello partners! I'm collaborating with stackOverflow to develop a module using Laravel for the backend and Vue.js for the frontend. Currently, I am facing an issue where the controller is not receiving values from the form when creating a new entity. ...

laravelvue.jsaxios

Scroll-triggered animation of SVG paths in React

While achieving this in vanilla Javascript is relatively simple (check out this for an example), I'm encountering difficulties implementing it in React, especially with a library like Framer Motion for animations. Framer Motion's useViewPortScro ...

javascriptreactjssvgframer-motion

Guide to changing the background color of material ui drawer component using styled-components

Issue with Styling Material Ui Drawer Using Styled Components In my application, I am utilizing a Material ui drawer in conjunction with Styled components. Although I have successfully styled several simple Material ui components using Styled components a ...

javascriptreactjsmaterial-uistyled-components

Learning how to implement Vue on port 5173 while utilizing Laravel can greatly enhance your development process. By leveraging the Vite development server, you'll have access to

Currently, I am diving into the world of Laravel and following along with a comprehensive fullstack tutorial that focuses on a combination of Laravel and Vue. After initiating Laravel on port 8000 using the command php artisan serve, everything seemed to ...

phplaravelvue.js

Retrieve the value of a duplicated object key from a JSON and replace it with just one unique value

In my current project, I am faced with the challenge of extracting duplicate object keys' values from a JSON dataset and replacing them with only one value. My goal is to ultimately return these unique key-value pairs as an array. NOTE: This data has ...

javascriptarraysnode.jsjsonecmascript-6

Using Material-UI to implement a Link component from the react-router library

I'm having trouble integrating the <Link/> component into my material-ui AppBar. Here is my navigation class: class Navigation extends Component { constructor(props) { super(props) } render() { var styles = { appBar: { ...

javascriptreactjsreact-routermaterial-ui