Questions tagged [vue-router4]
The vue-router4 tag has no usage guidance.
vue-router4
210
questions
0
votes
1
answer
12
views
Vue Router does not update the path in the address bar
I'm using "vue": "^3.4.21" and "vue-router": "^4.4.0"
main.ts
import { createMemoryHistory, createRouter } from 'vue-router'
# ...
const app = createApp(App)
...
- 4,058
0
votes
1
answer
29
views
Best way to implement conditional tabbed routing in vue
What I'm trying to implement is routing with tabs where the available tabs change depending on the user type (upon authentication the user type gets stored in a pinia store).
This is what I ended up ...
- 179
0
votes
1
answer
20
views
Vue3 + i18n-vue Override language detection?
I'm using vue3 with i18n-vue with language prefix. i18n-vue provides language detection (probably using browser language). How do I add custom detection?
eg) when a user hits /, i18n performs language ...
- 179
1
vote
1
answer
179
views
Vue 3 Router issue, no outlet, no displayed content
I have a vue3 application which works perfectly fine when embedding all packages in the directly (locally) in the output bundle.
package.json
"vue": "^3.4.29",
"vue-router&...
- 3,314
1
vote
1
answer
43
views
Escape colon in Vue router wikipedia-style
Context
I've been trying to replicate what wikipedia does with their URL
It works something like
/[Namespace]:[PageName]
/[PageName]
So if I go to /randompage I get as params:
namespace: ''
page name:...
- 13
1
vote
1
answer
61
views
Vue-Router render the component but doesn't change the url
import { createMemoryHistory, createRouter } from "vue-router";
import { AuthUser } from "../../auth/user";
const routes = [
{
path: "/",
component : () => ...
- 125
1
vote
1
answer
76
views
Vitest - ReferenceError: location is not defined
I'm trying to set up vitest for a Vue application that was recently converted from Vue 2 to Vue 3. I'm getting the following error, and have been unsuccessful in determining what the problem is. ...
- 366
0
votes
1
answer
59
views
How to properly scroll to an Element in VueJS when navigating back from a route, using an offset?
I am fighting with the Vue Router (Version 4.2 in my case). I want to achieve that when the user returns from navigation to another route, the original vertical position is restored.
const router = ...
- 12.2k
0
votes
1
answer
38
views
Routing to a link in Vuejs directly after it has been deployed on netlify
I created a Vuejs/Vuetify and Vue router site, after I deployed it to netlify, if I try to go to a link direct netlify brings up a page not found screen, what can I do?
I don't know what else to do, ...
- 1
0
votes
0
answers
23
views
this.$router.push is causing a leaveGuards.forEach is not a function error
I am using Vue3 and Vue router 4, while tyring to run this.$router.push
it throws leaveGuards.forEach is not a function
I see that https://github.com/vuejs/router/blob/...
0
votes
0
answers
57
views
How can I conditionally include content without a jarring animation?
In my Vue.js app, I have a structure like this:
<template>
<Base>
<RouterView/>
</Base>
</template>
Where Base looks like:
<template>
<...
- 5,222
0
votes
1
answer
63
views
Is it possible to take a vite/vue3 app and transform it so that it is not reliant on any build tool?
I have a web application that was built in vue 3 and reliant upon vitejs as a build tool. I am now being asked to remove the vitejs build tool due to security reasons. Is this even possible? The app ...
- 371
0
votes
1
answer
105
views
Use vue-router with catch-all/keeping original url and SPA
I am having difficulty getting vue-router to:
keep the original invalid url that the user typed in
display an embedded 404 page
From docs/examples I have seen I seem to be able to do one or the ...
- 1,759
-1
votes
1
answer
1k
views
Unknown variable dynamic import
I have a vue 3 app with Vite and vue-router where I am using dyanmic imports to split routes for better organization. Here is the code.
router/index.ts
import { authenticatedRoutes,publicRoutes } ...
- 132
1
vote
1
answer
370
views
Vue 3 simple catch-all fallback route not working on server
I have created a new Vue 3 application using Vue router 4.
When I access the link through <router-link> it opens the page but when I open the link directly it shows not found error.
{
Not Found
...
- 23
0
votes
1
answer
122
views
How to remove hashbang # from url if I use CDN?
I can't remove hashbang # from URL using Vue router with CDN. For example, I have URL example.com/#/about, I want to make it like this: example.com/about
I tried to change VueRouter....
0
votes
1
answer
143
views
Vue app.use() doesn't accept my router as a parameter
I am making a new project using Django and Vue 3 (with pinia). I am trying to set up vue router (the lastest version) and I found these instructions in the vue router website https://router.vuejs.org/...
- 23
0
votes
1
answer
62
views
VueJS static website not doing browser refresh
VueJS version 3.x with vue-router version 4.x developed website operates like it should in development and production environments except for a browser refresh. I would blame this on a misconfigured ...
- 371
0
votes
1
answer
764
views
VueJs + Vite + VueRouter: Can't get current route in setup() (despite many tutorials showing how to do it)
I have a vite (4.4.5) / vue (3.3.4) / vue-router (4.2.5) problem.
I try to detect which child-page is currently active based on my vue router.
There's plenty of tutorials and stackoverflow posts (like ...
- 81
0
votes
0
answers
37
views
issue with VueJS loading a component in specific route
I've want to get this behaviour :
When I click on a blogItem, then it loads the blogtoread component in this route url/blog/{i}.
I've got this code :
main.js :
import { createApp } from 'vue'
import ...
- 1
0
votes
1
answer
151
views
Vue3 Router-Link rendering to specific Router-View
I have a VueJS version 3 view/page that will have two components within it. One of those components will have a contextual menu (Router-Links) where menu items will need to render to a specific Router-...
- 371
-1
votes
1
answer
158
views
How to use vue js 3 route on dynamic url with 404 page?
I have single page site i.e xyz.com, in this page i'm checking routes for some dymanic urls and 404 page.
When i'm accessing url like xyz.com/p1, xyz.com/p2...etc. Routes are working as expected but ...
- 847
0
votes
0
answers
31
views
Nested Routes - Vue 3.3.4, Vue-Router 4.2.5 doesn't render router view
I am trying to play around with the Nested routes and came to an issue that the nested routes are not rendered on the component page.
//index.js - routes
//Define routing rules
import { ...
- 1,610
1
vote
0
answers
2k
views
[email protected] error: uncaught error during route navigation
The page didn't navigate correctly when I use router.push:
[Vue Router warn]: uncaught error during route navigation:
warn @ vue-router.mjs:35
vue-router.mjs:3471 TypeError: Cannot use 'in' operator ...
- 11
1
vote
2
answers
2k
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 ...
- 185
0
votes
0
answers
245
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 ...
- 1
0
votes
2
answers
211
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 ...
- 10.5k
0
votes
0
answers
186
views
vue router in Apache server cause problem
my question is about vue3 and vuerouter@4
i recently deployed my small vue project in apache server, i configured .htaccess most router link working perfectly handled by apache https://example.com/...
- 1
0
votes
0
answers
163
views
vue-router navigation is not working and getting error: ChunkLoadError: Loading chunk failed after npm run build
I am new learner of vue js 3. Recently I have come up with a strange problem. The problem is related to vue-router using with vue js 3.
Problem: route navigation is not working at local (http://...
0
votes
0
answers
37
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 ...
- 5,163
0
votes
0
answers
151
views
Vuejs Transition works for normal, in-out but component disappear if using mode out-in
So i tried to use Transition on routes changed. It works fine for normal transition, transition with mode='in-out' but when i tried to use mode='out-in' then when click link the current element did ...
- 11
0
votes
1
answer
204
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 ...
- 19
0
votes
0
answers
79
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 ...
- 1
0
votes
0
answers
125
views
Vue router 4: remove trailing slash if base provided
Is there any way to get rid of trailing slash (for Vue router 4) if base config provided?
For example:
const router = createRouter({
history: createWebHistory('/my-base'),
routes,
});
...
- 103
0
votes
1
answer
195
views
How to avoid "Error: Avoided redundant navigation to current location: "/inside/home" when auth guard won't allow that route
So when the user logs out I want vue to just route to the default landing page. Unfortunately, as it stands, this means that vue will route to the current route.
However, there is a guard in place ...
- 21.1k
1
vote
1
answer
154
views
How do i add `name` to a `redirect` URL in vue-router
Here is my router setup from the Vue project
import { createRouter, createWebHistory } from "vue-router";
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),...
0
votes
0
answers
204
views
How to set dynamic base route in vue router
I need to set a dynamic base route(i.e. every route will follow this path) for my app.
e.g. domain/t/{id}/...
Here t/{id} is the base url part where id will be set dynamically.
In createRouter ...
- 159
0
votes
1
answer
320
views
How to databind the to attribute of vue router's routerlink with Typescript using composition API in Vue 3?
Here is my component:
<script setup lang="ts">
defineProps({
linkPath: //what should I type here?,
label: String,
icon: String
})
</script>
<template>
<...
3
votes
1
answer
633
views
Vue Router - Right click / open in new tab
With the vue-router (4) I have the following setup
import { createApp } from 'vue'
import App from './App.vue'
import { createRouter, createWebHashHistory } from 'vue-router'
import routes from './...
- 80
1
vote
2
answers
664
views
Vue router order of routes from .getRoutes()
I'm using the following router configuration:
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/home',
name:...
- 148
-2
votes
1
answer
92
views
How to setup VueRouter correctly?
I want to create a vue application using VueRouter
My main.js file looks like this:
import VueRouter from "vue"
import MyApp2 from "./MyApp2.vue"
import { createApp } from "...
- 420
3
votes
1
answer
2k
views
useRoute() in Vue 3 Composition API with Typescript - [Vue warn]: injection "Symbol(route location)" not found using Typescript and
I've recently upgraded a Vue 2 app that that uses Vue Router and is mostly in typescript to Vue 3. When I migrated a function that reads the route from Options API, using this.$route to the ...
- 41
0
votes
1
answer
38
views
navigation route after deploy project vue3
after deployed my app (vue3 typescript) to local xampp folder ("test1"), the route does not work correctly. all routes redirect to "localhost/" not to the folder project "...
2
votes
1
answer
2k
views
How to fix '[Vue Router warn]: No match found for location with path '/' in Laravel Vue.js project?
using laravel and vue 3 face this [Vue Router warn]: No match found for location with path "/"
Hi I am facing this error in console [Vue Router warn]: No match found for location with path &...
- 31
0
votes
1
answer
459
views
vue-router 404 errors for paths that exist but do not have an associated record
My project is using vue-router and I am looking for a good way to handle 404 errors for paths that exist in my routes.js but doesn't have an associated record.
For example if someone visits:
https://...
- 7,279
-1
votes
1
answer
829
views
Change route in vue-router without reloading Components
I have a route in vue-router: /items?page=1&rowsPerPage=25&sortBy=state&sortType=desc
every Time i change one of the params (sortBy or page=2) i want to stay on the same site, without ...
- 113
0
votes
1
answer
451
views
How to transfer props together with router-link
I will try to describe it briefly. I have the data about the ads received through the request. This is an array of objects containing the name, picture, price, and so on. To draw them, there is a ...
- 1
5
votes
1
answer
3k
views
Vue3.3.2 - Is it possible to access useRoute within a composable function?
I'm trying to access useRoute from within a composable function. Starting with vue 3.3.2 & vue-route 4.2.0, I set up a test using npm init vue@latest with the router enabled. No problem accessing ...
- 51
0
votes
1
answer
488
views
Vue router doesn't load with create-vue@3
i was trying out the vue router but i'm not getting the expected result.
I'm following the https://router.vuejs.org/guide/ tutorial, if i use the CDN and put it in a unique HTML file it works, but if ...
- 27
1
vote
1
answer
748
views
how can i use named routes and their child routes in nuxt 3?
i have this file structure
pages/
--posts/
----[id].vue
----index.vue
--about.vue
--index.vue
and this navbar
<NuxtLink to="/">home</NuxtLink>
<NuxtLink to="/posts"&...
- 15