Category "vue-router"

Paginated async Component doesn't trigger setup() on route change

I have a paginated component. The async setup() method is pulling data from an API to populate the page. It works fine when the route is directly loaded, but wh

Get Url Vue js (Router)

i am developing an app in vue js with quasar and i would like to get current url in the index.js of Router folder but i do not know how. the problem is we can n

How do I configure http-server for history mode in Vue JS 2?

I have a Vue JS application built in the directory dist. For running I use http-server installed globally by the command: npm install -g http-server I run the

Display a specific route in a different router-view

I've got a Vue 3 app with Vue Router 4 and I want to achieve this: <template> <v-app> <router-view></router-view> //This is where

Toggling components depending of the current path in Nuxt

My layouts/default.vue looks like this: <template> <v-app style="background-color: transparent; color: unset"> <v-main> <ActHea

How to prevent double invoking of the hook created?

So I have a problem with my vue3 project. The gist: I need to support different layouts for some use cases: authorization, user profile's layout, group's layout

In Vuejs3 how to make the sticky header component change background colour when intersecting with other components?

I am just wondering, how to structure my code to make my sticky <Header /> component change its background-color when intersecting with other components (

routers and components in vue.js

My component information is not displayed!!! the router is working great and I test it to many times but there is nothing in components when I run the project.

where to look in meteor app if vue-router suddenly stops sending props to other vue compoents

everything was working just fine and suddenly now Vue components are not receiving the props sent on router-view. I've tried deleting the 'local' and .cache fol

Vue 3 dynamic components at router level

Dynamic imports is needed for me, eg. i have 10 layouts, but user only visited 3 layouts, I should not import all of the layouts, since its consumed unnecessary

VUE js How hide routes by role in vue-router? Spa Laravel Vue

I am writing a SPA application (laravel + vue). There was a question how to hide routes in vue-router before authorization of a user with a certain role. Now th

NuxtJS change query params and reload page

I have a route in my NuxtJS application that accept query parameters. I'm trying to implement a logic that allow the user to change the query parameters and rel

How to destroy/unmount vue.js 3 components?

I have a fairly large vue.js 2 application that has a dynamic tabs mechanism. Users can interact with the application opening and closing tabs, each tab represe

jQuery not working in vue component when change route

I have an issue with jQuery script files is not working inside vue component but it working outside it, I found a solution to put all script files in script sec

How to react to route changes on Vue 3, "script setup" composition API?

This is an example of routes I have in my application: { path: "/something", name: "SomeRoute", component: SomeComponent, meta: {showExtra: true}, }, {

Vue 3: component not rendering when added with router-view

I have created vue app using vue-cli and instead of html I have added my component TopBar for links and those links are not getting rendered. App.vue <templa

Detect navigation abort/cancel in a guard

Currently it's expected that the navigation is confirmed, so both beforeEach and afterEach global guards are triggered. showSpinner and hideSpinner are supposed

VueJS How to Implement RouterGaurd

In a real-world Vue application, the router can easily get to several hundred line long so I split the router.js into separate (component) route files and impor

How to handle permissions for route from database?

In Vue, when I want to restrict some pages for some users, in router I define a permission in meta, like this: routes: [ { path: 'transport',

What is <router-view :key="$route.fullPath">?

I'm completely new to Vue.js and I think I have a bit of understanding of how a router works with things like: <router-link to="/"> But I am not really u