Questions tagged [vue-router]
Vue Router is a routing library for single-page applications designed for use with the Vue.js framework.
6,090
questions
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, ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
-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 ...
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 ...
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 ...
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>
...
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 ...
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/...
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: ...
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.
...
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
...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ?
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-...
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 ...
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 ...
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 ...
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 ...
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 >
<...
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 }...
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 ...
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 ...
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 ...
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/...
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 ...
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/...
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 ...
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 ...
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 ...
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 ...
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>
&...
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 ...
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/...
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 ...
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 ...
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 ...
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....
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 ...
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 ...