Questions tagged [vue-router]
Vue Router is a routing library for single-page applications designed for use with the Vue.js framework.
6,191
questions
555
votes
15
answers
612k
views
How can I get query parameters from a URL in Vue.js?
How can I fetch query parameters in Vue.js?
E.g.
http://somesite.com?test=yay
Can’t find a way to fetch or do I need to use pure JS or some library for this?
- 11.1k
369
votes
16
answers
221k
views
Vue.js - How to remove hashbang #! from url?
How to remove hashbang #! from url?
I found option to disable hashbang in vue router documentation ( http://vuejs.github.io/vue-router/en/options.html ) but this option removes #! and just put #
Is ...
- 4,675
311
votes
24
answers
467k
views
How to add external JS scripts to VueJS Components?
I've to use two external scripts for the payment gateways.
Right now both are put in the index.html file.
However, I don't want to load these files at the beginning itself.
The payment gateway is ...
- 11.5k
248
votes
19
answers
686k
views
Vue.js redirection to another page
I'd like to make a redirection in Vue.js similar to the vanilla javascript
window.location.href = 'some_url'
How could I achieve this in Vue.js?
- 7,665
243
votes
16
answers
490k
views
How to set URL query params in Vue with Vue-Router
I am trying to set query params with Vue-router when changing input fields, I don't want to navigate to some other page but just want to modify URL query params on the same page, I am doing this:
...
- 72.7k
239
votes
12
answers
280k
views
Vuejs: Event on route change
On my main page I have dropdowns that show v-show=show by clicking on the link @click = "show=!show" and I want to set show=false when I change the route. Please advise me on how to realize ...
- 2,949
210
votes
3
answers
110k
views
How to create and use an optional parameter in Vue Router?
I need to route to a certain component in two ways - one with a param, one without. I have searched for optional params and somehow can't find much info.
So my route:
{
path: '/offers/:member',
...
- 3,446
202
votes
19
answers
407k
views
Do we have router.reload in vue-router?
I see in this pull request:
Add a router.reload()
Reload with current path and call data hook again
But when I try issuing the following command from a Vue component:
this.$router.reload()
I get ...
- 72.7k
199
votes
15
answers
298k
views
Can vue-router open a link in a new tab?
I have a summary page and a detail subpage. All of the routes are implemented with vue-router (v 0.7.x) using programmatic navigation like this:
this.$router.go({ path: "/link/to/page" })
However, ...
- 2,063
149
votes
8
answers
123k
views
Vue.js - Making helper functions globally available to single-file components
I have a Vue 2 project that has many (50+) single-file components. I use Vue-Router for routing and Vuex for state.
There is a file, called helpers.js, that contains a bunch of general-purpose ...
- 6,521
147
votes
7
answers
275k
views
How to VueJS router-link active style
My page currently has Navigation.vue component.
I want to make the each navigation hover and active. The hover works but active doesn't.
This is how Navigation.vue file looks like :
<template>
...
- 2,069
138
votes
16
answers
274k
views
How to get current name of route in Vue?
I want to get the name of the current route of vue-router, i have a component menu with navigation to another componentes, so i want to dispaly the name of the current route.
I have this:
created(){
...
- 2,049
129
votes
8
answers
265k
views
How can I go back/route-back on vue-router?
Ok, to explain this simply:
I have 3x pages.
Page 1 (Home)
Page 2 (Menu)
Page 3 (About)
Page 1 has a-
<router-link to="/menu">
button that when clicked routes to "/menu".
...
- 2,217
119
votes
7
answers
233k
views
Vue-router redirect on page not found (404)
I'm trying to redirect to 404.html on page not found using the router.beforeEach global hook, without much success (using Vueand Vue-Router 1.0):
router.beforeEach(function (transition) {
if (...
- 2,117
112
votes
16
answers
135k
views
How to change page titles when using vue-router?
I would like to specify my titles within the route definition if possible. What is normally specified in <head><title> and appears in the browser title bar.
I have my project set up as ...
- 8,506
111
votes
12
answers
174k
views
Enclosing a router-link tag in a button in vuejs
Can I wrap or enclose a router-link tag in a button tag?
When I press the button, I want it to route me to the desired page.
- 1,895
105
votes
11
answers
141k
views
vue-router — Uncaught (in promise) Error: Redirected from "/login" to "/" via a navigation guard
Why is vue-router giving me this error? To be clear, the login flow works as intended but I want to a) get rid of the errro and b) understand why the error is happening.
Error:
Uncaught (in promise) ...
- 6,863
105
votes
9
answers
131k
views
Accessing Vuex state when defining Vue-Router routes
I have the following Vuex store (main.js):
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
//init store
const store = new Vuex.Store({
state: {
globalError: '',
user: ...
- 6,521
102
votes
5
answers
262k
views
VueJs get url query
I'm developing a website with vuejs and at this moment I'm with a problem, I need to get the URL query (page) from a URL like this websitename.com/user/?page=1 but the this.$router.query.page gives me ...
- 1,189
83
votes
9
answers
117k
views
Redirect to requested page after login using vue-router
In my application some routes are just accessible for authenticated users.When a unauthenticated user clicks on a link, for which he has to be signed in, he will be redirected to the login component.
...
- 4,834
74
votes
16
answers
169k
views
Vue.js scroll to top of page for same route
I can set scrolling behaviour to Vue.js Router like this:
const router = new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'index',
...
- 3,845
74
votes
6
answers
132k
views
Passing props to Vue.js components instantiated by Vue-router
Suppose I have a Vue.js component like this:
var Bar = Vue.extend({
props: ['my-props'],
template: '<p>This is bar!</p>'
});
And I want to use it when some route in vue-router is ...
- 32.5k
72
votes
7
answers
131k
views
vue-router - How to get previous page url?
I want to get previous page link or url in vue-router. Like a this. How to do it?
const link = this.$router.getPrevLink(); // function is not exist?
this.$router.push(link);
Near concept is this.$...
- 1,331
71
votes
2
answers
55k
views
How to create dynamic tag based on props with Vue 2
How can I make a component similar to vue-router router-link where I get the tag via props to render my template ?
<my-component tag="ul">
</my-component>
Would render:
<ul>
...
- 2,682
69
votes
22
answers
127k
views
Vue Router return 404 when revisit to the url
I just enable Vue router history mode. And it work fine when I visit to vue routing via v-href or href. But, when I try to refresh that page or go directly from browser address bar, it just return 404....
- 4,566
69
votes
4
answers
75k
views
Add event listener to <router-link> component using "v-on:" directive - VueJS
I'm attempting to add a custom handler InlineButtonClickHandler to a <router-link> component's click event, so that I can emit a custom appSidebarInlineButtonClick event.
But, my code isn't ...
- 1,847
68
votes
8
answers
140k
views
How to get current route name in Nuxt 2 and 3?
I'm using Nuxt.js for building a static website.
How to access in component's script code currently displayed route name (I would like to avoid reading direct url from browser location)?
Can I ...
- 5,880
65
votes
8
answers
59k
views
vuejs application with different layouts (e.g. login layout, page layout, signup etc.)
I generated a project using vue-cli. I see project has one App.vue which is kinda main layout of the app - if I'm not mistaken. Here I put my basic HTML layout and <router-view></router-view&...
- 1,325
61
votes
4
answers
92k
views
Passing props with programmatic navigation Vue.js
I have a Vue component that has a prop named 'title' e.g:
<script>
export default {
props: ['title'],
data() {
return {
}
}
}
</script>
I navigate to the component ...
- 6,613
61
votes
4
answers
81k
views
Silently update url without triggering route in vue-router
I need to update the hash of the url, without actually triggering the vue-router to go to that route. Something in the likes of:
router.replace('my/new/path', {silent:true})
This would update the ...
- 875
60
votes
6
answers
62k
views
get all routes in a vue router
I am trying to create a simple menu using vue router, I'd like to iterate all routes and display them in my menu, currently I am using below instance method in my component but I just get a function, ...
- 7,665
59
votes
11
answers
116k
views
VueJs vue-router linking an external website
This may be simple, but I've looked over documentation and can't find anything about it. I want to have my 'github' link redirect to say, github.com. However, its just appending 'https://github.com' ...
- 1,167
51
votes
2
answers
39k
views
Vue.js page transition fade effect with vue-router
How to achieve a fade effect page transition between vue-router defined pages (components)?
- 3,608
47
votes
6
answers
153k
views
How can Vue router get current route path of lazy-loaded modules on page load?
I have a vue app with router set up like:
import index from './components/index.vue';
import http404 from './components/http404.vue';
// module lazy-loading
const panda= () => import(/* ...
- 726
47
votes
5
answers
57k
views
How to create a 404 component in vuejs using vue-router
I'm new to vuejs and I'm working on my first project with vue. I'm just wondering how I will route to my 404.vue component when the requested url is not found.
Any Idea?
- 1,701
47
votes
4
answers
36k
views
How to display a "loading" animation while a lazy-loaded route component is being loaded?
I have split my app into multiple chunks with webpack's code splitting feature so that the entire application bundle isn't downloaded when the user visits my webpage.
The chunks that some routes ...
- 33.8k
45
votes
4
answers
105k
views
Open link in new window with Vuetify v-btn and Vue router
Recent versions of Vue Router allow for links that open in a new tab, e.g. the following
<router-link :to="{ name: 'fooRoute'}" target="_blank">
Link Text
</router-link&...
- 36.3k
45
votes
4
answers
25k
views
Access VueRouter outside Vue components
Is it possible to access the VueRouter outside of Vue components.
I've tried importing Vue in a JavaScript file. In this file I can access Vue.http but not Vue.router or Vue.$router. The last 2 return ...
- 798
44
votes
4
answers
21k
views
Vue-Test-Utils Unknown custom element: <router-link>
I'm using Jest to run my tests utilizing the vue-test-utils library.
Even though I've added the VueRouter to the localVue instance, it says it can't actually find the router-link component. If the ...
- 1,958
42
votes
10
answers
77k
views
vue-router : how to remove underline from router-link
This results in an underlined link:
<li><router-link to="/hello">Hello</router-link></li>
My understanding is that the router-link element generates an a tag.
I've tried ...
- 3,290
42
votes
7
answers
31k
views
Vue Router: how to cast params as integers instead of strings?
When I enter a URL using the browser field, the params are cast as strings, rather than an integer, e.g. /user/1 returns {id: "1"}. However, when when using this.$route.push({}), the params are, ...
- 3,133
41
votes
4
answers
65k
views
How to use vue-router with a predefined template
I have added a link in my items object
items: [
{ icon: 'dashboard' text: 'Home', link: '/'},
{ icon: 'dashboard' text: 'Account', link: '/account'},
]
Where do I put the router-link component?
- 2,716
41
votes
12
answers
56k
views
How to write test that mocks the $route object in vue components
I have a component that contains statement like this.$route.fullPath, how should I mock value of fullPathof $route object if I want to test that component?
- 1,271
41
votes
6
answers
72k
views
Vue $route is not defined
I'm learning Vue router. And I want to made programmatic navigation without using <router-link> in templates file.
My router and view:
router = new VueRouter({
routes: [
{...
- 5,134
41
votes
2
answers
31k
views
What is <router-view :key="$route.fullPath">?
I'm completely new to Vue.js and I think I have a bit of understanding of how a router works with things like:
<router-link to="/">
But I am not really understanding what the ...
- 697
41
votes
5
answers
33k
views
How to access async store data in vue-router for usage in beforeEnter hook?
How is it possible to access store data in beforeEnter which is retrieved asynchronously via the store action?
import store from './vuex/store';
store.dispatch('initApp'); // in here, async data ...
- 1,236
40
votes
4
answers
122k
views
How to use vue-router params
I'm new to Vue now working with its router.
I want to navigate to another page and I use the following code:
this.$router.push({path: '/newLocation', params: { foo: "bar"}});
Then I expect ...
- 7,122
40
votes
8
answers
60k
views
How to use router in vue composition api?
I defined a route in vue:
/users/:userId
Which point to UserComponent:
<template>
<div>{{username}}</div>
</template>
and I use computed from @vue/composition-api to get ...
- 11.1k
39
votes
2
answers
26k
views
(VueJS) vue-router match multiple paths
I am using vue-router, and am looking to match two very distinct paths. Is there some kind of array notation I can use?
- 5,349
39
votes
3
answers
12k
views
What is the best Vue-Router practice for very large webapplications?
I have to make a webapplication with many different modules (like a todo-module, document-modules, and a big usermanagement-module for admin users). The total number of pages is > 100. And the module ...
- 909