Questions tagged [vue-router4]
190 questions
29
votes
8 answers
Vue.js - Component is missing template or render function
In Vue 3, I created the following Home component, 2 other components (Foo and Bar), and passed it to vue-router as shown below. The Home component is created using Vue's component function, whereas Foo and Bar components are created using plain…
Circuit Breaker
- 3,298
- 4
- 17
- 19
16
votes
7 answers
'does not provide an export named 'createRouter'' vue 3, vite and vue-router
I just started using vite with vue.
When I'm trying to use vue-router I get the error:
SyntaxError: The requested module '/node_modules/.vite/vue-router/dist/vue-router.esm.js?v=4830dca4' does not provide an export named 'createRouter
My…
Maiken Madsen
- 611
- 1
- 15
- 29
11
votes
3 answers
How to make certain component "keep-alive" with router-view in Vue 3?
I've created a small app that consists of two main components and I am using vue router to route between components.
First component is called MoviesList and the second one is called Movie.
I've registered them in routes js file.
const routes = [
…
Pavo Gabrić
- 179
- 2
- 4
- 8
11
votes
2 answers
How to declare TypeScript type interface for custom meta fields in Vue Router v4?
With Vue Router version 4, which is currently in beta.11 in vue-router-next repo, there is a documentation page about how to define meta fields custom type interface with TypeScript.
declare module 'vue-router' {
interface RouteMeta {
// is…
ux.engineer
- 10,082
- 13
- 67
- 112
10
votes
1 answer
Vue3 using script setup, how to access this.$router.push()
I am new to Vue3 and am struggling with some examples. I have a simple login component that should redirect to another page but isn't.
Here is my template:
And here is my script:
The problem is that the this.$router is not available, because this…
Josh Davidson
- 147
- 1
- 1
- 5
10
votes
3 answers
Vue Router - Get route params using the Vue 2 Composition API
Im using the Vue 2 Composition API and want to access the route parameters from the Vue Router in my setup() method.
As described in the Vue Router documentation:
Because we don't have access to this inside of setup, we cannot directly access…
TheKeymaster
- 857
- 1
- 11
- 27
9
votes
2 answers
Failed to resolve component VueRouter
I have a project build with Vue.js 3.2.13 and Vue-Router 4.0.14. I think I do everything right but the browser raises an error "[Vue warn]: Failed to resolve component: router-view
If this is a native custom element, make sure to exclude it from…
yasinkuyuk
- 111
- 1
- 1
- 4
9
votes
2 answers
vue3 router.push doesn't update the component when url match the same route?
In a child component I meet some problem.
router config path "/blog/:user/:article"
file "Article.vue"
defineComponent({
setup() {
console.log("Call setup()"); // Debug info
const route = useRoute();
const router = useRouter();
…
axlis
- 395
- 1
- 3
- 13
9
votes
1 answer
Route query is undefined when using useRoute() in setup() for Vue3 and vue-router4(next)
I am using Vue3 with vue-router 4.0.5 and I am experiencing an issue where useRoute() appears to retieve the route correctly but the query of the route is undefined, even though a query exists.
For the path /search?q=vue is it expected that…
Kyl
- 125
- 1
- 7
8
votes
4 answers
No match found for location with path - Vue 3 + Vue Router 4
I need to create routes dynamically within a Vue application. I have created a basic component on this code sandbox link.
The issue that I am encountering is that on first load the home page is returning a 404, even though the route has been added…
Senate No. 7
- 133
- 1
- 2
- 8
8
votes
1 answer
How to access $route property inside setup method (Vue 3)?
How can I access $route.params property inside setup method in Vue.js? When I try to access it inside other method, or inside template everything works fine, but i cannot access it inside setup method.
Maciej Bledkowski
- 604
- 9
- 26
8
votes
1 answer
Vue.js 3 - Why is importing vue-router not working in this case?
I have the following files
router.js
import VueRouter from 'vue-router'
export const router = VueRouter({
routes: [
{
...
}
]
})
main.js
import { createApp } from 'vue'
import App from './App.vue'
const app =…
RDU
- 812
- 1
- 9
- 22
7
votes
0 answers
Vue 3 - How to disable adding trailing slash?
Problem statement : Vue app changes the URL after loading the scripts and adds a slash to the end. This only happens for routes where the path matches /.
I have the server configured like this :
/game(.*) => Vue 3 App
anything else => reverse…
Deny Weller
- 71
- 3
7
votes
2 answers
vue router 4 next() callback warning
I have unsucessfully been trying to fix this vue-router warning :
The "next" callback was called more than once in one navigation guard when going from "/" to "/". It should be called exactly one time in each navigation guard. This will fail in…
JK2018
- 429
- 1
- 9
- 23
7
votes
2 answers
VueJS-3 How to render
In vuejs 2 I was able to render directly in the router by return a render html tag. I'm trying to do the same things in vue3 with vue-router 4, but it doesn't appear to work:
{
path: 'posts',
redirect: '/posts/all',
name:…
Speedy059
- 629
- 10
- 24