Questions tagged [vue-router]
Vue-Navigator offers seamless routing capabilities exclusively tailored for single-page applications, intricately aligned with the robust Vue.js framework.
Within my Vue.js application, I am utilizing a bootstrap-based framework to automatically generate the HTML code for my header and navigation menu with links. This generated content is then inserted into the page by setting the innerHTML of a designated mo ...
In my parent view, I have a list and some metadata displayed in a right pane. I'm looking to replace the right pane component with specific item data when clicked on the list: export default { mode: 'history' base: process.env.BASE_URL, routes: [ ...
Template Component.vue utilizes the route in this manner: <router-link :to="{ name: 'club' }"> <lazy-image src="club.jpg" class="club_class" alt="Club alt" /> </router-link> Here is ...
I am currently delving into Vue and working on a project that involves creating a Vue application with a side menu for user navigation throughout the website. Utilizing Vue Router, my code structure looks like this: <template> <div id="app ...
When passing a user id from the router-link using params to display the user's detail on the profile page, everything works correctly. However, upon reloading the page, $route.params.id changes to undefined and the displayed data disappears. To retrie ...
Trying to set up a client-side restful api with vue.js and vue-router where route params can be utilized to showcase a subset of a store's data into components. All the necessary data for the client is loaded into the store during initialization (not ...
router.push({ path: 'register', query: { plan: 'private' } }) will create a URI like: http://localhost:3000/#/register?plan=private&plan=public in case the query parameter with key plan and value public already exists in $currentRoute.query. This mod ...
I have a sidebar displayed below: <template> <section> <div class="sidebar"> <router-link v-for="(element, index) in sidebar" :key="index" :to="{ name: routes[index ...
After saving my JSON data in a JS file for Vue, I encountered an issue with accessing it and getting my HTML v-for condition to work properly. The method described in the Vue.js documentation didn't help me fetch and execute the JSON data. Could someone pl ...
I'm facing an issue with my Vue2 site where everything seems to be working fine for the users, but Google is flagging most of the pages as having 404 errors. Even though when accessing a direct URL like hptts://example.com/example, the page loads corr ...
I am currently utilizing Vue.js 2.3.3, Vue Resource 1.3.3, and Vue Router 2.5.3 in my project while trying to configure Vue-Auth. Unfortunately, I keep encountering a console error message that reads auth.js?b7de:487 Error (@websanova/vue-auth): vue-resour ...
I have a route to view user profiles like this: /user/Mary/profile. I want to create an alias /me/profile where the username parameter is hidden and replaced with a constant value. Here's what I have so far: const myUserName = 'Mike'; export default [ ...
I am facing an issue with the production build of my Vuejs application. When I use the npm run build command to generate the production build and then use serve -s dist to deploy it, everything works fine except for one parameterized path (product) in Vue ...
At the moment, I have a component that is displayed on the page. When I check the this.$router variable inside this component, I notice that the full path property is '/hello/reports?report=3849534583957' and the path property is '/hello/rep ...
Is there a way to fetch data from an API and populate my store (such as user info) before the entire page and components load? I have been struggling to find a solution. I recently came across the beforeRouteEnter method that can be used with the options ...
Below is my code snippet in Vue.js: <template> <router-link id="router-link" > </router-link> </template> <script> ⋮ </script> <style scoped> #router-link{ border: 2px so ...
For my latest project, I decided to use Vue3. The first project I worked on using components and routers functioned perfectly. However, I have encountered an issue with calling the Header and Router Component in my Home page. It seems to be opening another ...
I have a Vue.js single-page application hosted on Azure that functions properly in production when starting from the homepage. However, I encounter a problem when trying to directly access links or refresh pages as it leads me to a 404 error page. I suspe ...
I've set up a preloader using Gridsome (Vue static site generator with Vue Router). In my index.html, I added a simple div that covers the entire page. Then, to hide the preloader once everything has loaded, I included this JS code in index.html: wind ...
Is there a way to access and programmatically unmount a component instance loaded from Vue Route and persisted using <keep-alive> and <component>? I am working on a dynamic tab system where each tab renders a URL which displays its declared com ...
Within the UserLogin component, there is a submit button that triggers the following method: methods: { login() { this.$store .dispatch("login", { email: this.email, password: this.password ...
What is the best way to automatically switch between two pages in a Vue.js application without any user interaction? I want to display the HelloWorld page first and then switch to the myPage page after a few seconds. I believe I need to use the vue-router ...
In my project, I have three component icons named <DiscoverIcon>, <FeedIcon>, and <ProfileIcon>. In a tab loop, I want to display a different icon for each respective title. I experimented with using a list element like this: { key: 1, ...
Could you please review this code snippet: It displays two routes that utilize the same component to fetch content from an API. Main.js const router = createRouter({ history: createWebHistory(), routes: [ { path: "/route1& ...
To showcase the issue, I have created a codepen: https://codepen.io/anon/pen/vzqgJB Within the Vuetify v-app, there is a router-view. <div id="app"> <v-app> <v-content> <v-container> {{$route.path}} &l ...
I am facing an issue with two v-links that look like this: '/accountList?accountType=1': { name: 'accountList1', component: require('./../views/finance/accountList.vue') }, '/accountList?accountType=2': { name: 'account ...
Currently, I am utilizing Vue-cli with vue-router integration. Within my App.vue, there is a <router-link to="/about" >About</router-link> which, upon clicking, displays the content of the about component. My goal is to pass props data to the ...
After setting up a SSR/progressive nuxt project using create-nuxt-app, I encountered an issue with HTTP requests being made from my two pages to a backend API. These requests are initiated from the async asyncData(ctx) method in my nuxt page. Strangely, w ...
I am currently developing a notification feature that can be triggered from any component. It utilizes a straightforward Vuetify v-snackbar. Within App.vue <router-view :key="$route.fullPath"></router-view> <v-snackbar :valu ...
What is the best way to implement dynamic routes with multiple dynamic parameters in any order using Vue 3 and Vue Router? These parameters should be able to be passed in any order. In our web application, we have over 500 views which makes it impractic ...
After deploying my Vue App on a hosting platform, I noticed an issue. When I try to access "www.mydomain.com/about" directly in the browser, I receive a 404 Error Page. This made me wonder if I deployed the wrong thing. I ran npm run build before deployin ...
If you have 3 different layouts for your app (e.g. one for customers, one for employers, and one for the admin interface), how would you go about laying out the router-views? Currently, I have implemented the customer view like this: <template> & ...
Currently, I'm working on an application that utilizes firebase-auth for authentication. In my design, I've successfully secured the user component to only allow authenticated users. However, I now face the challenge of safeguarding the login com ...
I am currently working with vue.js and I'm looking to implement a functionality where I can redirect a user to another URL within the navigation guard called beforeRouteEnter. The main objective is to check if the current city of the user is included ...
I have recently ventured into the world of Vue.js and my current project involves fetching data from an API, implementing pagination, and creating a detailed view for each post upon clicking. I have successfully implemented the pagination feature, however, ...
Currently, I am delving into Vue and facing a challenge setting it up as the complete front-end with Laravel. In my current setup, I have created a personal blog for testing purposes using Laravel with Blade engine and incorporating some Vue components whi ...
I am currently working with vuejs3 and I am looking to implement a filter feature. When a user clicks on a specific link, I want to add the selected parameters to the URL and update the browser's address bar initially. Subsequently, I plan to make an ...
I'm encountering an issue when attempting to call a parameter in the meta title route, I've already attempted this method but it's still not working { path: '/test/blog/:slug', name: 'Surah', component: Surah ...
I have set up a new vue3 router and configured different routes: const routes = [ { path: "/", name: "home", component: HomeView, }, { path: "/about", name: "about", component: () => ...
I'm attempting to update the Query Parameters in Vue without refreshing the component using Vue-Router. However, when I use the code below, it forces a component reload: this.$router.replace({query: this.filters}); Is there a way to prevent the component ...
I'm currently developing a project using Vue and implementing vue-router for navigation. A peculiar behavior occurs when the route changes to /employees - only the Employees menu item is activated. However, when the route switches to /employees/add, both t ...
Recently, I have been tasked with authenticating windows AD users. Here is the scenario: A web page is hosted on Server A (Vue + vue-router) An API interface is running on Server B (node + express) Users enter their AD username & password on the web page ...
Vue-router typically requires the standard setup as outlined below: In main.js, the routes.js file is required and it usually contains code similar to this: //routes.js import Register from './components/Register' import Login from './comp ...
As a newcomer to Vue, I'm eager to learn about when the onReady() function will be triggered. The explanation in the Vue Router documentation states: This method queues a callback to be called when the router has completed the initial navigation, which ...
Recently, I encountered an issue with a routing problem in my web application. Initially, the route was set as: http://localhost:8080/user/reset Everything worked fine during development. However, after building the project and placing it in the loca ...
I've encountered an issue while trying to push the router using vue-router. this.$router.push({ path: '/' }).catch(() => {}); The error message reads as follows: app.js:43636 Uncaught TypeError: Cannot read property 'classList' ...
Here is a snippet from my main app.js: import Vue from 'vue' import language from './language' import VueI18n from 'vue-i18n' Vue.use(VueI18n) const i18n = new VueI18n({ locale: 'en', messages: language.messag ...
I am currently developing a project using vue-cli, vue router, and node.js. The routing in Vue is set to hash mode so that users can easily navigate to specific pages by copying and pasting URLs or typing from memory without encountering any errors. Howeve ...
One feature I've come across on certain websites, like the Jira site, is quite interesting. For instance, if we take a look at the timeline page with the following URL - When you click on the name of an issue (which is an anchor element), it triggers the ...
When using Vue 3 Composition API, if the components for paths "/users" and "/users/user-reference" are completely different and unrelated, how should I structure the router configuration? Possible Solutions: const routes = [ { path: '/users', component: ...
I am currently facing an issue with rendering a component through router-view using vue.js 2.0 and vue-router. Upon inspecting vue devtools, I noticed the "fragment" label next to router-view, but no additional information was provided. It is worth menti ...
Just wondering, for a path like /chart/:charttype I am looking to dynamically load different types of chart components into that area. What is the best approach in VueRouter (currently I only have /chart/:charttype there) and component (right now I have a ...
As I delve into Vue Router, I'm detecting a peculiar odor. Before proceeding further, I feel the need to seek advice from the community to ensure that I am on the right track. Prior to Vue Router, I had a parent component receiving an event from its child ...
When utilizing vue-router, the component known as <router-link> is available for linking to various routes. For instance: <router-link to="/foo">Link</router-link> Nevertheless, it appears that the subsequent code accomplishes a similar ...
I am in the process of designing a layout that includes: +-------------------------------------------------+ | HEADER (STATIC) | +-------------------------------------------------+ | FOREWORD (just homepage; dynamic ...
After creating a Vue.js integrated with three.js application, I encountered an issue with the canvas getting duplicated every time I opened the view containing the three.js application. The canvas remained visible below the new view, as shown in this image ...
I am working on a Vue component called Portfolio.vue, which contains a child component called Category.vue. I am able to navigate to the Category.vue component using <router-link :to = "{ name: 'category', params: { id: id }}"> where Catego ...
Incorporating VueJS 3.3 along with Vue Router v4, my route structure is as follows: https://i.stack.imgur.com/ExZ9N.jpg Despite navigating properly to the intended URL http://localhost:5173/koin/document-sets/177/comments, Vue continuously throws an erro ...
After setting up my Nuxt app to load a link and its child view on the route http://127.0.0.1/user/:id, I encountered an issue with API calls for the user not triggering properly due to changes in the id parameter. Initially, I had placed the API calls in ...
Hey there! So, I'm looking to pass a query from the current page to the next one without manually coding it into all of my push functions. I was wondering if there's a way to do this through Navigation guard or some hooks? I did some research and here's w ...
While working with Laravel 9 and Vue 3, I encountered a peculiar issue. When navigating to a link by clicking on the menu, everything worked as expected. However, if I tried to access the same link by directly typing the URL or refreshing the page, I would ...
I am currently utilizing the v-for directive to retrieve URL names. However, I am encountering difficulties in properly passing the value obtained from an instance of v-for as the URL name. <template> <v-list-tile class="pl-5" v-for="choice i ...
I'm facing a bit of a mess here, as it seems like the usual solutions for forcing a refresh in a Vue app aren't working. I have a basic page that uses some jQuery to load a third-party Vue.js app. The app loads fine and functions well. The issue ...
When it comes to displaying a 404 page if a parameter doesn't match, I'm a bit puzzled. For instance, if the user name is “joe” and someone tries to access “/joe/categories”, then the categories component should be displayed. Now, I want ...
I am currently facing an issue where I want to include links or buttons in my DataTable rows that can navigate to a vue route when clicked. The straightforward approach would be to add a normal <a> element with the href attribute set to "/item/$ ...
Recently, I integrated authentication into my Vue.js application utilizing Amazon AWS Cognito. Although the authentication is functioning properly, I am looking to tidy up the URL and so far have not been successful in doing so. Following authentication w ...
I have a parent component with an array that I display in the template. My goal is to click on a link that uses vue-router with a dynamic id attribute, and then open a new component displaying only the element of the array that corresponds to that id. Howe ...
I am struggling to fix it, please assist me. I can't seem to pinpoint the issue and need some guidance. Error Image Links: https://i.stack.imgur.com/VhVXL.png https://i.stack.imgur.com/IENFm.png ...
Currently, I am working with the official Vuejs router and aiming to implement unique animations for different routes. I found an example here: (look under 'Route-Based Dynamic Transition') However, I encountered a challenge in specifying transition dura ...
My goal is to extract all characters that come after the equal sign within a URL: let url = this.$route.query.item console.log(typeof(url)) // outputs string let status = url => url.split('=')[1] When I run the code, it shows 'split' as und ...
After navigating from Home.vue to History.vue using this.$router.push("/history/" + fileid);, a socket.io request is triggered in the created or mounted lifecycle hook which fetches a large amount of data. The rendering process, especially with v-for, take ...
When using a router link without an anchor tag, I am able to ctrl+click the link to open it in a new tab. However, when used with a tag (e.g., tag="td"), the ctrl+click functionality no longer works. The same issue occurs with clickable elements generated ...
It seems that focus resetting and screen readers detecting route changes are not integrated into vue-router. I understand why Vue might have omitted this feature, considering the varying use cases, but I am surprised by the lack of information on accessib ...
I am facing an issue where I need to pass down the Firebase user as a prop from the root component to my child components. I managed to achieve this by passing the user to my router. However, the problem arises when I wrap my new Vue instance in an onAuthS ...
Using Vue with Node.js to host my website on an AWS EC2 instance. I don't have a main index node.js file, just the vue-router file. Utilizing AWS CloudFront to secure my certificate and traffic. The issue arises when accessing the site through the server l ...