Questions tagged [vue-router]

Vue Router is a routing library for single-page applications designed for use with the Vue.js framework.

Filter by
Sorted by
Tagged with
0 votes
2 answers
24 views

router = useRouter(); in Setup(). But then how can I access to the router object in my methods?

As you know, if I do this : const router = useRouter(); in one of the methods, I got and undefined object. So I need to put it in the setup(): setup() { const router = useRouter(); } But then, ...
Jean François Manatane's user avatar
0 votes
2 answers
43 views

How to reload the same route in vue 3 (vue-router 4)

I encountered a curious case during development. I have a modal component that warns users about a change in price: If a user clicks the button I want the page to reload and automatically run the ...
Ivan_OFF's user avatar
  • 193
0 votes
1 answer
15 views

pinia store from fetched data seems not reactive

I am doing a little exercise with Vue, Pinia and Router and I am facing problems with retreiving data from a simple json-server I'll try to explain myself as shortly as possible: Let's say my store ...
Riccardo De Contardi's user avatar
0 votes
1 answer
27 views

Vue Router Load Issue

I have installed vue router for my project, but the problem is that when clicked on button I see that url parameter changes but the page doesn't update. Or when I directly access the url, intended ...
razor60's user avatar
  • 11
0 votes
0 answers
24 views

How to access current route name from App.vue in Vue 3 script setup [duplicate]

I'm having trouble with getting current route name in App.vue in Vue3 script setup. I would like to get the current route name and check if it matches some conditions. The route is /login. and the ...
Kenta's user avatar
  • 1
1 vote
2 answers
19 views

Can I access the vue-router parser manually?

Can I get access to the vue-router parser so that I can evaluate a link before navigating to it? That is: Let's say I have the path /one/two/three but that is not the current path. I'd like to see if ...
Paulie's user avatar
  • 1,952
0 votes
1 answer
17 views

Vue: how to properly connect Pinia store, Router and UI toolbar for sharing a global state variable

Given an app on Vue 3 and Quasar. The app manages some configurations but only one at a time. So there's a notion of "current configuration" which is simply a string (name). I want to have a ...
Shrike's user avatar
  • 9,248
0 votes
0 answers
21 views

Using 2 dynamic routes on the same level with Nuxt 3

I have the following structure inside my Nuxt 3 application: ├── pages │ └── [section] | | | │ │ ├── [slug].vue │ │ └── [[page]].vue ... The [[page]] route is used as a page for the ...
Alexander Petrushyn's user avatar
-1 votes
0 answers
18 views

Problem with Vue3.x Routes maintaining position between pages

In my Vue project, I made 2 different pages with routes, the pages are related with the App.vue component, and on top you can find the AppHeader compenent for Navigation App.vue <script> import ...
TitanFrex's user avatar
0 votes
0 answers
12 views

Cannot use 'in' operator to search for 'path' in undefined not getting solved

i am always getting error "Cannot use 'in' operator to search for 'path' in undefined" i checked several blogs, it shows that i am doing spell mistake in router file, but even after ...
nmn124's user avatar
  • 1
0 votes
1 answer
28 views

Adding role based routes in vue router with pinia

I want to load one of three possible routes depending on a users role in my pinia store. The current problem I'm having is that the pinia store doesn't seem to be initalised before the router has been ...
Karna's user avatar
  • 148
1 vote
0 answers
66 views

Vue router not working when deployed to a server

I have a vue application composed of 3 components. App, Home and View. I am using vite. In App I have only a router viewer: <template> <div> <router-view></router-view> ...
davidb's user avatar
  • 1,523
0 votes
1 answer
35 views

Redirects in vue router v4

I'm migrating from Vue Router v3 to Vue Router v4 and bumped into an unexpected problem that breaks quite a lot of logic in my app - maybe someone faced it and knows a good solution. In Vue Router v3 ...
vir us's user avatar
  • 10k
0 votes
1 answer
44 views

Dynamic routing in Nuxt3

How would you manage an url structure like the one below? I am migrating a project to Nuxt3 and I would like to understand if I can avoid managing redirects. /fashion blog category fashion /fashion/...
maestroosram's user avatar
1 vote
2 answers
31 views

go to specific component view from router-link

Is there a way to got to a specific component from route that it has several components?, I search the docs but there is nothing about it here you have my shortened routes in app router: const routes: ...
tsiPlus's user avatar
  • 83
1 vote
0 answers
70 views

Multiple nested redirects in Router v4 (Vue 3)

I'm migrating from vue2 to vue3 and when it comes to switching from Router v3 to Router v4 my route redirects stop working as expected and I can't see how to fix it after digging through the docs. ...
vir us's user avatar
  • 10k
0 votes
1 answer
15 views

[Vue warn]: Missing required prop: "icon" at <FontAwesomeIcon> at <RouterLink key="products" to= {name: 'products'} class="box flex flex-col

I am using Vue 3 and vite. for icons i use font awesome. this is my code: </template> <div class="pages flex flex-col bg-maincolor rounded-lg py-3"> <router-link ...
Mahmoud Khaled's user avatar
0 votes
1 answer
20 views

Vue Router, Are there a way to retain the query from previous page with Navigation guard

As the topic say, I just want to carry the query from the current page to the next page without having to explicitly put it in all of my push function, but instead maybe just Navigation guard or some ...
Natthapol Maneechote's user avatar
0 votes
0 answers
11 views

Cannot get /path on reload

I have a vue front-end which runs on port 8080 and back-end which runs on port 8000. I have set up a proxy to connect the two. The issue arises when I reload the page. On reloading, it shows 'Cannot ...
Harshit Goswami's user avatar
0 votes
0 answers
25 views

Fix so that when I reload child page I stay on it instead of being redirected to parent page (vue.js)

I have created dynamic child URL for our guide but when I refresh the page it seems to be loading the parent page instead of the page I am currently on. For example: Let's say that I am on the page ...
user12288003's user avatar
0 votes
0 answers
35 views

Getting blank page after migrating to Vue-Router v4

I took over this vue project and want to migrate it to Vue 3. I followed the steps in this guide https://v3-migration.vuejs.org/migration-build.html and was now on the step to migrate vue-router from ...
Ben's user avatar
  • 13
0 votes
0 answers
21 views

How can I rerender the ui in tauri + vue3

I'm quite new to tauri, I tried to make an existing web-vue app a desktop app with tauri. The problem is, that after the login, to refresh all components I run this.$router.go(), but this does not ...
Kreuterkeule's user avatar
0 votes
0 answers
12 views

useRouter()'s .replace method failing when useRoute()'s .query object is assigned

I have this nested watcher: const router = useRouter() const route = useRoute() const unwatch = watch( () => route.query, // required because useRoute() is async () => { // map url to ...
Artur Müller Romanov's user avatar
0 votes
0 answers
28 views

How to create routeRules like Nuxt 3 but in Vue 3 + Vite SSR

I'm using Vue.js 3 + Vite 4 in SSR Mode, I saw Nuxt 3 has a configuration option like this I'm wondering whether this thing available in Vue 3 + Vite SSR or not ?
Joker Dark Knight's user avatar
0 votes
0 answers
9 views

VueRouter 4: navigation aboorted in Chromium on back/forward

When I click back/forward buttons in Chromium (not Chrome), vue router gives me the error: "Error: Navigation aborted from "/ORG/studies/STUDY-2324/edit" to "/ORG/studies/STUDY-...
Andrew's user avatar
  • 723
0 votes
1 answer
24 views

Vue3 Vuex Vue-route state seems to be undefiend

EDIT: ChatGPT had a solution for me. Apparently, the keyword "this" in the router refers only to the router itself and not the entire Vue app. After I included the store in the router it ...
De0x95's user avatar
  • 11
0 votes
0 answers
41 views

Importing Vue Router Types in TypeScript - Missing Exported Members Issue

I'm working on a Vue 3 project with TypeScript and Vue Router, and I'm encountering issues with importing types from the vue-router package. I've followed the recommended import syntax for Vue Router ...
Monish Obaid's user avatar
0 votes
0 answers
38 views

404 error given when using flowbite components with vite, vue, vue router and tailwindcss

I've tried to use Flowbite components within my Vite project, originally this was working fine. I was able to create a carousel that animated, however after installing vue-router no Flowbite ...
Dave's user avatar
  • 13
0 votes
1 answer
26 views

Why am I not able to pass data from the parent to child component in vue using RouterView?

It's a simple program where I send the user-entered data to server (via axios) from home page, get the response and emit the data to App.vue. App.vue recieves the data and passes the data to all it's ...
Harshit Goswami's user avatar
0 votes
0 answers
11 views

Async not working on jest for Vue2 UnitTesting

Hi I'm trying to cover a UI project with unit tests using Jest. Starting with the small bits and pieces so I can get on the flow of work. There's a file called SilentSignIn: <template > <...
Rafael Bolaños's user avatar
0 votes
0 answers
12 views

vue-router when reloading the page at the home page, redirects me login page

After login, router successfully redirects me home(Index). When I reload the page at the home(Index), router redirects me login page again. Here is my router/index.js: import { useAuthenticationStore }...
AlwaysJunior's user avatar
0 votes
0 answers
16 views

How to display a different path on the same components in vue

I am trying to replicate the https://uk.indeed.com landing page functionality. On the main page, when you click on a job, it displays the job details on the right. I could achieve a similar result ...
foliwe83's user avatar
  • 546
1 vote
0 answers
27 views

AXIOS not working with Same Page with different query parameter Vue3

HI i am facing an issue if i am on this route http://127.0.0.1:8000/indexpage then ajax request not works again for this route http://127.0.0.1:8000/indexpage?subcategory_id=6 i want product on basis ...
Umer Ghouri's user avatar
1 vote
2 answers
72 views

Vuejs - Use Router push to go to a path two levels up

I have a button, which on clicking performs a router push operation. However, I wanted to navigate to path which is two levels up relative to current level and could not find any examples on how we ...
rsram312's user avatar
  • 119
0 votes
0 answers
45 views

Slash transforms in %2F in router-link params

I want to pass a link to the parameters, but instead of a slash I get %2F in the link My route { path: 'folder/:name+', name: 'folder', component: () => import("./components/...
Hotring's user avatar
0 votes
1 answer
21 views

How to make a route take many parameters

I'm doing something similar to a file-exchange application and I got to the point of creating folders, I want to make it possible to create a folder in a folder and the route was something like ...
Hotring's user avatar
0 votes
1 answer
62 views

Vue router back button prevent navigation to previous domain

Here is my situation, I have a Vue 3 app using vue-router. On certain pages in my app, there is a back button. If a user navigates to one of the back button pages the page directly, for example /users/...
derek scott's user avatar
0 votes
1 answer
34 views

Is this correct params passing in vue router 4?

I want to pass data through vue router 4. Here is my code: this.$router.push({ path: "/clients", params: { tabValue: 'legalEntities' } }); I do this on my submit button, and when I'm open to ...
Dragan's user avatar
  • 19
0 votes
1 answer
101 views

TS always report an error in vue3 but disappear after restarting vscode

I create a vue3 project as docs said,with TypeScript and vue-router,but everytime I create a new *.vue file under views foler and add it to routes which defined in src/router/index.ts,the vscode ...
joey's user avatar
  • 11
0 votes
0 answers
15 views

When vue-router passes parameters, how to solve the duplicate id and route name?

When vue-router passes parameters in the form of "path: "/user/:id"/", how can other routes be redirected normally? for example user/4089838987906461 user/settings/profile In this ...
ggzed's user avatar
  • 1
0 votes
1 answer
24 views

How to render a default view in Vue.js 3

I would like to render a default view/route when Vue.js loads. At the moment, when the page loads, the header and the footer are shown and there is a small delay before the homepage is rendered. This ...
Lucien Dubois's user avatar
0 votes
1 answer
67 views

Vue3 + Class Components + Typescript: How to use beforeRouteEnter while using Vue-facing-decorator

I am trying to invoke a beforeRouteEnter function into VUE3 class component. I tried using Component modifier and place the function right in the class, and neither of them worked. <template> &...
skyScraperno_1's user avatar
0 votes
1 answer
85 views

What Typescript definition should I use for a route link using Vue Router?

Having trouble finding what TS interface I should use for route links. I have a shared component in my Vue 3 + Typescript application that takes in internal and external links. Think of them as toast ...
Otter's user avatar
  • 250
0 votes
1 answer
69 views

Vue3 + RouteLinks+headless UI: Menu does not close after click

I have a Vue3 project with vue-router and headless UI. In my Navbar component i want to have a dropDownMenu. For the dropDownMenu I came across headless UI Menu Component https://headlessui.com/vue/...
AnotherByte's user avatar
0 votes
0 answers
31 views

Vue3 vue-router not rendering

Question development environment vue 3.3.4 vue-router@4 IDE: vs-code 1.80 I'm following the vue-router tutorial as a demo, and the router-link renders, but the router-view does not. There are no ...
alexliu's user avatar
0 votes
1 answer
34 views

Quasar component not loading

Hi I have a Quasar project with router, Pinia, eslint and TypeScript. My problem is that the components are loading if they are injected directly into the layout (the MainLayout bellow) but not on the ...
Pontios's user avatar
  • 2,377
0 votes
2 answers
67 views

Generating types out of vue-router route[x].name

i am trying to generate route names from the routes of vue router. the goal is to use a helper function findRouteByName() to find a route. but the parameters of the helper function should have the ...
Deniz's user avatar
  • 1,435
0 votes
0 answers
14 views

How to add different html meta depending on Vue routes using Vue 3

I've been trying to work out how with not much success (I don't think i know the correct things to google) How i can have different meta for different routes (using Vue Router) of my Vue 3 application....
Link19's user avatar
  • 586
0 votes
1 answer
32 views

Vue Router - Default value for optional url parameter when a separate optional url parameter is set

I have the following route: export const personRoutes: RouteRecordRaw[] = [ { path: '/person/:id?/:handedSlug?', name: 'Person', component: () => import('./view/person'), }, ]; I ...
JimmyBanks's user avatar
  • 4,208
0 votes
0 answers
27 views

useHead is updating title on mounted and is not updating on activated hook

I am using useHead for updating title in pages, titles are updating on mounting of pages but when I revisit pages, title of page doesn't get updated. When I revisit the page title of page should be ...
Muhammad Binyameen Malik's user avatar

1
2 3 4 5
122