Using Vue 3 along with Vue Router 4 and a web hash history router
I encountered an issue where a URL with a query parameter was not being recognized by Vue, leading to unexpected redirect problems in my application.
For instance:
Original URL: Https://example.com/?foo=bar#/
Desired URL: Https://example.com/#/?foo=bar
It seems like the #/ at the end of the URL is causing Vue to overlook the query parameter. Is there a way to resolve this issue?
For your situation, the correct format should be :
Https://example.com/#/?foo=bar
After making this update, adjust your router settings as shown below:
import {
createRouter,
createWebHashHistory
} from 'vue-router';
const routes = [
// define the routes here
];
const router = createRouter({
history: createWebHashHistory(), // ensure to use webHashHistory() here
routes,
});
export default router;In your main.js file:
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
const app = createApp(App);
router.beforeEach((to, from, next) => {
const url = new URL(window.location.href);
const searchParams = url.search;
if (searchParams) {
const newUrl = url.origin + url.pathname + '/#/' + searchParams;
window.location.replace(newUrl);
} else {
next();
}
});
app.use(router).mount('#app');By implementing this, you can handle incorrect URLs (query parameters before the # symbol) and implement a redirection logic in your application.
I'm diving into the world of NodeJs and Angular, and I recently created a simple NodeJS application following instructions from this link. However, I encountered an issue when trying to install Angular alongside NodeJS. After running ng new angular-cr ...
Hello everyone, I have a simple dilemma. I am trying to implement a custom closeIconButton, but the only available prop is closeIcon. However, this prop is not sufficient because I need this custom button to also have an onClick property. If I add the onC ...
Currently facing a challenge with extracting JSON data from a string. The request body is in string format, but I am having difficulties parsing out the data correctly. This is what I have: String to parse: uniq1.data.data.data 7 bleep\nuniq2.data.d ...
Currently, there are two options available: Universal Analytics and Google Analytics 4. The reasons why I lean towards using Google Analytics 4: Universal Analytics is set to be retired on July 1, 2023, so it makes sense to start fresh with Google Analyt ...
After making a request for stormpath user custom data, I used the following code: res.render('home', { title: 'home', user: req.user.customData, }); Instead of receiving a JSON object of custom data as expected, a URL ('') ...
Here is a link to the jsfiddle code snippet. Upon adding jQuery("#grid").jqGrid('sortableRows'); into my JavaScript code, I encountered an issue where keyboard navigation no longer worked after sorting rows Below is the JavaScript code snippet: ...
I am facing an issue while trying to update an array of arrays and display it as a reactive variable, however the DOM does not seem to reflect those changes. To achieve this, I have two components - a parent component and a child component: Parent Compon ...
I am encountering an issue with the responsive design of a website I am currently developing. Scenario: The website features 3 different layouts for Desktop, Tablet, and mobile devices. These layouts consist of similar components with slight CSS adjustmen ...
Struggling with creating a React modal and facing some issues. Let's consider the structure below: React structure <ComponentUsingModal> <Left> <ButtonToActivateModal> ... </ButtonToActivateModa ...
One example involves displaying array elements in an <ul>, with each element starting with <li> and ending with </li>. Here is the attempted code: clearedtaskslist: function(){ this.template='<ul>' for(let i=0;i<t ...
Looking to create a customized v-switch element with Vuetify, specifically aiming for unique colors in both the on and off states. Struggling to achieve the desired visual look, which can be seen here. https://i.stack.imgur.com/k2A2E.png Experimented wit ...
Currently, I am working on developing REST APIs using Express.js. One particular express route that I have set up is as follows: /api/customer I have incorporated multiple query parameters into this route, such as: /api/customer?name=jake /api/customer?c ...
I need help finding a function that can reset my Vuetify stepper. Even though I tried setting e1 to 0 with a reset function, the stepper remains on the same screen. ...
Currently, I'm working on a project that involves displaying a list of videos and allowing users to play them in their browser upon clicking. The technology stack being used is Angular 2. Below is the HTML code snippet for achieving this functionalit ...
I am trying to calculate the elapsed time from the order time in Vue, but I keep getting a warning message that says: [Vue warn]: You may have an infinite update loop in a component render function. Can anyone recommend the correct approach to tackle this ...
Apologies for the ambiguous question title - struggling to articulate this properly. Essentially, I have some JavaScript code that I am looking to streamline by using a for loop. $('.q1').keyup(function () { if ($.inArray($(this).val().toLo ...
My project involves building a category module using Laravel for the backend and Vue.js for the frontend. I have incorporated the library Laravel Nestable The library has been successful in producing the desired output. [ { "id": 1, "name": "C ...
Utilizing ng-messages to show error messages for form validation in my application. I have a multi-language app, how can I implement ng-messages to support multiple languages? HTML Form <div class="messages" ng-messages="myForm.email.$error"> & ...
Hello there, I'm currently working on a PHP form that needs to dynamically add a table row when the "Add" button is pressed. I'm using a for loop to save the values, but I'm running into an issue where the data is not being saved into my dat ...
I stumbled upon this unique code snippet that effectively maintains both forward and reverse references within an array: var arr = []; arr[arr['A'] = 0] = 'A'; arr[arr['B'] = 1] = 'B'; // When running on a node int ...