Questions tagged [vue-router]
Vue Router is a routing library for single-page applications designed for use with the Vue.js framework.
vue-router
6,207
questions
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
0
answers
24
views
TypeError: Failed to execute 'insertBefore' on 'Node': parameter 1 is not of type 'Node'
I am new to vue.js and i'm trying to upgrade a relatively big vue 2 project to vue 3 and after i updated all the necessary files, i came across this TypeError: Failed to execute 'insertBefore' on '...
0
votes
0
answers
18
views
Nuxt 3 child route with dynamic parameter not getting active-class
I have the following folder structure. And the following pages are of important
/workshops and /workshops/workshop-1.
The issue I'm having now is that my active-link works for /workshops, but not for ...
- 9,065
1
vote
1
answer
34
views
How to unit test vue beforeRouteUpdate hooks
I have the following vue component, which uses onBeforeRouteUpdate hook to call the init() method when the route param changes (test/a -> test/b).
The following stackblitz instance shows the output ...
- 623
0
votes
1
answer
22
views
How can I access router props passed in to Vue Router in function beforeEach
I have a Vue Router routes setup like so:
[
{
path: '/regions',
name: 'regions',
component: () => import(/* webpackChunkName: "regions" */ '../views/RegionsView.vue'),
...
- 139
-1
votes
1
answer
42
views
How do I mounted a object data using axios in vue js
this is my menu page:
<div class="col col-md-3" v-for="(product, index) in products" :key="index">
<div class="card">
<...
0
votes
1
answer
20
views
In vue3, why router.currentRoute and router.currentRoute.value printed value different?
When I use the address to enter the /npc page or refresh the page in the /npc page, I encounter the following situation.
Code:
router.beforeEach(async () => {
console.log(router.currentRoute, ...
- 13
0
votes
1
answer
29
views
Vue router not changing or responding to URL
Navigating from one page to the other works, but this change is not reflected in the URL path. Trying to enter a page directly from the URL (i.e. localhost:8080/explore) also just loads the home page.
...
- 232
1
vote
0
answers
43
views
How to create a simple component inline?
I have a component that looks like this:
App.vue
<template>
<RouterView />
</template>
I would like to not have a file for such a simple component. How would I go about creating ...
- 19.7k
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
0
votes
0
answers
33
views
Facing issues in nested routes in Vue-3
I am creating a simple CRUD application for users based on different roles, but I'm facing issues with nested routes and component rendering. I have carefully reviewed their official documentation, ...
0
votes
0
answers
11
views
Vue routeguard prevents supabase SIGN_IN event to occur after OAuth redirect
I've followed this tutorial on vueschool https://vueschool.io/articles/vuejs-tutorials/use-supabase-auth-with-vue-js-3/ for supabase auth in vue3 app.
For signin i'm using this method:
const ...
- 93
0
votes
0
answers
47
views
Problems serving Vue Vite build through Express, Failed to load module script: Expected JavaScript module
I am currently trying to test my Nodejs (Vue, Vite, Express) web application in production but am having trouble serving specific routes to the client.
On some pages i recieve
Failed to load module ...
0
votes
2
answers
31
views
Vue Router Not Reflecting Routes, Stays on Home Page
I'm working on a Vue 3 project and encountering an issue where the Vue Router is not reflecting the correct routes. When I navigate to any route, such as /cars or /admin, the URL does not update and ...
- 94
1
vote
0
answers
43
views
Nuxt 3 Dynamic Routing Conflict with Nested and Single Slug Pages
I am building a project with Nuxt 3, However, I am facing a routing conflict with my current setup. Here is my folder structure:
pages/
[types]/
[slug].vue
[...categoryPath]/
[slug].vue
[...
- 635
0
votes
0
answers
37
views
vue-router scroll doesn't work properly based on user action
I created following page:
<template>
<div>
<v-row>
<v-col>
<div id="c1">
<h2>Chapter 1</h2>
<div><!-...
- 235
0
votes
0
answers
18
views
Cannot find module '../page/home/index.vue' or its corresponding type declarations.ts(2307)
when i use vue3+ts ,my router are right,but it's tips that cannot find module '../page/home/index.vue' or its corresponding type declarations always!
I was used hash modules,not history modules.
i ...
- 1
0
votes
1
answer
22
views
error get data to one data using vue router and laravel
I learning Vue in use Vue router, make crud SPA application
component to show all data:
<template>
<div>
<table class="table table-striped">
<...
- 1
0
votes
1
answer
73
views
v-slot can only be used on components or <template> tags. Using <router-view> (plugin:vite:vue)
<router-view v-slot="{ Component }">
<component
:is="Component"
class="container"
ref="componentRef"
/>
</router-view&...
- 89
0
votes
1
answer
34
views
Vuex and Vue Router - double condition on beforeEnter not working
I have double condition in beforeEnter and nobody can enter to right place. Is there a limit in conditions or what? :(
my code in the router file:
const routes = {
path: `${routerConfig.preRoute}/...
0
votes
1
answer
47
views
why in vue3, the transition component will cause the router to fail to jump？
My router configuration:
{
path: '/user',
name: 'user',
component: Layout,
redirect: '/user/detail',
meta: {
title: '111',
},
children: [
{
path: '...
- 91
0
votes
0
answers
21
views
confirm not working on iOS after using native "back" (vue3, vue-router)
In my app the confirm dialog is broken on iOS after using the native "back" button. My app uses vue3 with vue-router. When just using the RouterLink elements to navigate the page, everything ...
- 47
0
votes
0
answers
53
views
Vue Router: Automatically being redirected to root path of router upon page refresh
I have a problem in my Vue app where the router automatically redirects itself to the root of the current path. Say, I am on the path localhost:5000/new/123456 and when I refresh the page, I am ...
- 55
0
votes
0
answers
27
views
Issue with Vue.js Microservice Path Configuration in a Larger Application
I'm working on a web application structured as a microservice within a larger application. Our architecture requires changing the paths after a base URL where our project is hosted.
I have updated the ...
0
votes
1
answer
38
views
how to get the lazy loaded component with vue-router and getRoutes
I'm using vue 3.4.27 and vue-router 4.3.2 and I'm lazy loading some routes like this:
{
path: '/path/to/pageone',
component: () => import('../components/MyStuff/PageOne.vue')
},
{
path: '/...
- 585
2
votes
0
answers
62
views
Detect route change inside inner/partial component (VueRoute 3 in Nuxt 2.14)
Issue
The Vue component PartialComponent has another InnerPartialComponent that, in turn, has a Google Recaptcha (i.e. VueRecaptcha) inside that actually is an old vue-recaptcha (v1.3.0). So, in ...
- 1,419
0
votes
0
answers
25
views
How can I pass an entire URL, with filenames and query parameters, as a single prop in Vue Router?
I'm working on a website that essentially functions the same as the Internet Archive's Wayback Machine, storing backups of entire websites. The Wayback Machine's URLs for backups look like this:
https:...
0
votes
1
answer
31
views
Vue problems with Github page route with params
import { createRouter, createWebHistory } from 'vue-router';
const routes = [
{ path: '/', component: ()=> import('@/components/Home/Home.vue')},
{ path: '/:marca/cars', component: ()=> ...
- 125
1
vote
1
answer
32
views
(Vue 3) Open graph works only on homepage but not other routes
I have a VueJS website deployed to github page with below open graph setting place in the <head> section inside /index.html:
<head>
<meta name="description" content="My ...
- 13
0
votes
0
answers
19
views
Integrating Vue.js 3 and Laravel in a Single Project with a JavaScript Template
I am working on a project with Vue.js 3 for the front-end and Laravel for the back-end, but both in the same project. To speed up the project's development, I purchased a template made in vanilla ...
- 1
0
votes
0
answers
28
views
Cleaning Vue URL query parameters
I have a Vue application with a checkout view using Stripe.
The js to trigger the Stripe payment is the next one:
await stripe.confirmPayment({
elements,
confirmParams: {
...
- 3,965
0
votes
0
answers
38
views
How to resolve FastAPI StaticFiles route with deep routes [duplicate]
My FastApi server is configured with static route,
app.include_router(api)
app.mount("/", StaticFiles(directory=script_dir,html=True), name="static")
In static directory I have ...
- 47
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
0
answers
28
views
how to use Vue Router's Relative redirecting (not working)?
i am learning Relative redirecting from Vue router Doc.
and i am tring to implement the doc example of the code.
const routes = [
{
// will always redirect /users/123/posts to /users/123/profile
...
- 1
0
votes
1
answer
58
views
When navigating to a route the useFetch won't work reactive
I am trying to use useFetch in my page component, so when I navigate to this page using nuxt-link the useFetch will send the request and get the response of 200, but the items fetched from the api won'...
- 33
0
votes
0
answers
77
views
vue vitest - vue-router spy is not being called
I am writing a test suite for my vue 3 application using vitest and vue test utils. When the vue component is mounted, it calls its own init method, which in turn initializes a store to make a post ...
- 623
0
votes
1
answer
21
views
Vue route name is undefined and path is incorrect
I'm trying to have some logic in my root App.vue (as soon as the app loads) that depends on the current route, but I'm finding the route.name to be undefined, and when I tried logging the path it was ...
- 11.3k
0
votes
0
answers
24
views
Deploy static retype files at vue route
I have a website set up using vue and now I want to add some documentation to it. I decided to use retype as its easy to write and format documentation. I use retype build to build the files and they ...
- 155
0
votes
0
answers
34
views
Can someone explain to me why this routing setup in Vue.js is wrong?
I'm currently trying to figure out how the Vue.js routing works. I feel like this should be the right approach when creating nested routes with multiple parameters:
{
path: 'campus-list',
name: '...
- 13
0
votes
0
answers
36
views
Redirection problems with router-link in Vue.js: button does not return to another page
I recently started working on a Vue.js project. The purpose of my participation in the project was that the site has a Landing Page (App.vue), with several components that integrate App.vue, and I ...
0
votes
0
answers
32
views
grab router link anchor id with Vue Router and Vue Composition API
Using vue-router v4 with Vue v3 Composition api how to I get the id of the generated anchor tag when clicked? This is for analytics tagging usage.
Example usage:
<RouterLink id="linkHome" ...
1
vote
0
answers
73
views
Vue router not redirecting
Yesterday I started working with Vue, Vuetify and Vue Router. With the vuetify project setup the router package was already installed.
First I created some components and basic pages. Then I wanted to ...
- 11
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
49
views
How to invoke a js function after every page is created?
In my Vue2 app, it's easy enough to call a JavaScript function in the created() method of every .vue file. Not wanting to do this in every file, am I able to invoke a JS function on creation (or mount)...
- 1,328
0
votes
1
answer
40
views
Extend parent view slot in RouterLink vỉew
I have a defined Vue route, parent view, and two child views
./route/index.ts
const router = createRouter({
routes: [
{
path: '/dataset/:dataset_name',
component: ...
- 199
0
votes
1
answer
42
views
Retain router transitions with :key while making sure children base views don't refresh
I have an app where I've used :key="$route.path" on the router view for transitions. But the problem is that using :key ends up refreshing the child route base view that ends up calling the ...
- 11
0
votes
0
answers
30
views
Vue ref of parent component does not trigger update of child when changed in another child (Android Chrome)
In my Vue/Vite/Vue Router project, I use a component called DefaultLayout for the basic layout of my page.
It has several slots, like action-left, action-right, title and default:
<!-- layouts/...
- 17
0
votes
0
answers
29
views
How to routing view in a child of view routed?
I have a website use Vue Nuxt Typescript Pinia Tailwind.
I don't know how to load a view that view is loaded by route of top navigation cuz inside loaded view I have sidebar menu, I want each choice ...
0
votes
2
answers
94
views
Vue.js router.push changes URL but RankerDetail component doesn't update on button navigation
I'm developing a Vue.js application with vue-router and facing an issue with my RankerDetail component. This component is meant to display different data based on the route parameter id. When I ...
- 112
1
vote
1
answer
310
views
Vue3 Composition API: Error: Codegen node is missing for element/if/for node. Apply appropriate transforms first when using named slots in router-view
I am currently in the process of rewriting my Vue code in all of my apps but am running into a rather annoying error that I cannot seem to decipher. Let me explain to you first what I am trying to do....
- 420