Vue Router is a routing library for single-page applications designed for use with the Vue.js framework.
Vue Router is a routing library for single-page applications designed for use with the Vue.js framework.
Questions tagged [vue-router]
6076 questions
535
votes
13 answers
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?
Rob
- 10,851
- 21
- 69
- 109
362
votes
16 answers
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 there any way to have clean url?
Example:
NOT:…
DokiCRO
- 4,565
- 3
- 20
- 22
304
votes
22 answers
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 needed only in when user open a specific component…
Gijo Varghese
- 11,264
- 22
- 73
- 122
236
votes
18 answers
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?
Jimmy Obonyo Abor
- 7,335
- 10
- 43
- 71
234
votes
12 answers
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 this thing.
kipris
- 2,899
- 3
- 20
- 28
228
votes
15 answers
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 like this:
this.$router.replace({ query: { q1: "q1" }…
Saurabh
- 71,488
- 40
- 181
- 244
200
votes
3 answers
Optional param in vuejs 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',
component: Offers,
name: 'offers',
…
yoyoma
- 3,336
- 6
- 27
- 42
196
votes
18 answers
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 this error:
Uncaught TypeError:…
Saurabh
- 71,488
- 40
- 181
- 244
182
votes
13 answers
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, when I route from the summary page to the subpage,…
Tang Jiong
- 1,893
- 2
- 11
- 9
148
votes
8 answers
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 functions, such as capitalizing the first letter of a…
Ege Ersoz
- 6,461
- 8
- 34
- 53
138
votes
7 answers
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 :
126
votes
16 answers
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(){
this.currentRoute;
//this.nombreRuta =…
Isaías Orozco Toledo
- 1,919
- 5
- 19
- 35
125
votes
8 answers
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-
button that when clicked routes to "/menu".
For now, Page 2 (Menu) has a
button and when this…
John107
- 2,157
- 3
- 20
- 36
113
votes
7 answers
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 (transition.to.path === '/*') {
…
nunop
- 2,036
- 2
- 20
- 36
108
votes
16 answers
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 and appears in the browser title bar.
I have my project set up as follows:
main.js
import Vue from 'vue'
import App from…</div>
<div class="grid ai-start jc-space-between fw-wrap">
<div class="grid gs4 fw-wrap tags ">
<a href="../../questions/tagged/vue.js" class="post-tag grid--cell" title="show questions tagged 'vue.js'" rel="tag">vue.js</a>
<a href="../../questions/tagged/vuejs2" class="post-tag grid--cell" title="show questions tagged 'vuejs2'" rel="tag">vuejs2</a>
<a href="../../questions/tagged/vue-router" class="post-tag grid--cell" title="show questions tagged 'vue-router'" rel="tag">vue-router</a>
</div>
<div class="started mt0">
<div class="s-user-card s-user-card">
<time class="s-user-card--time" datetime="asked Aug 01 '18 at 18:17">asked Aug 01 '18 at 18:17</time>
<a href="../../users/5056347/darkhorse" class="s-avatar s-avatar__32 s-user-card--avatar">
<img class="s-avatar--image" src="../../users/profiles/5056347.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="darkhorse" />
</a>
<div class="s-user-card--info">
<a href="../../users/5056347/darkhorse" class="s-user-card--link">darkhorse</a>
<ul class="s-user-card--awards">
<li class="s-user-card--rep" title="reputation score">8,192</li>
<li class="s-award-bling s-award-bling__gold" title="21 gold badges">21</li>
<li class="s-award-bling s-award-bling__silver" title="72 silver badges">72</li>
<li class="s-award-bling s-award-bling__bronze" title="148 bronze badges">148</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="s-pagination pager fr">
<div class="s-pagination--item is-selected">1</div>
<a class="s-pagination--item" href="../../questions/tagged/vue-router_page=2" rel="" title="Go to page 2">2</a>
<a class="s-pagination--item" href="../../questions/tagged/vue-router_page=3" rel="" title="Go to page 3">3</a>
<div class="s-pagination--item s-pagination--item__clear">…</div>
<a class="s-pagination--item" href="../../questions/tagged/vue-router_page=99" rel="" title="Go to page 99">99</a>
<a class="s-pagination--item" href="../../questions/tagged/vue-router_page=100" rel="" title="Go to page 100">100</a>
<a class="s-pagination--item" href="../../questions/tagged/vue-router_page=2" rel="next" title="Go to page 2"> Next</a>
</div>
</div>
</div>
</div>
</div>
<script src="../../static/js/stack-icons.js"></script>
<script src="../../static/js/fromnow.js"></script>
</body>
</html>