How can I make a component similar to vue-router `router-link` where I get the tag via props to render my template ?

    &lt;my-component tag=&quot;ul&quot;&gt;
    &lt;/my-component&gt;

Would render:

    &lt;ul&gt;
      anything inside my-component
    &lt;/ul&gt;

How to create dynamic tag based on props with Vue 2

I&#39;m using Nuxt.js for building a static website. 

How to access in component&#39;s `script` code currently displayed route name (I would like to avoid reading direct url from browser location)? 

Can I somehow access `$route.name` ?

How to get current route name in Nuxt 2 and 3?

I have a Vue component that has a prop named &#39;title&#39; e.g:

    &lt;script&gt;
    export default {
      props: [&#39;title&#39;],
      data() {
        return {
        }
      }
    }
    &lt;/script&gt;

I navigate to the component programmatically after a certain action is complete.
Is there a way to programmatically route a user while also setting the prop value? I know you can create a link like this:

    &lt;router-link to=&quot;/foo&quot; title=&quot;example title&quot;&gt;link&lt;/router-link&gt;

However, is there a way to do something like the following?

    this.$router.push({ path: &#39;/foo&#39;, title: &#39;test title&#39; })

EDIT:

As suggested I&#39;ve changed my route to the following:

       {
          path: &#39;/i/:imageID&#39;,
          component: Image,
          props: true
        }

And the navigation to the following: 

    this.$router.push({ path: &#39;/i/15&#39;, params: {title: &#39;test title&#39; }})

However, my Image component (template - see below) still doesn&#39;t show any title.

  

    &lt;h1&gt;{{ title}}&lt;/h1&gt;

Is there anything that could be causing issues?

Passing props with programmatic navigation Vue.js

Am trying to create a simple menu using vue router , id like to iterate all routes and display in my menu , currently am using below instance method in my component but i just get a function , how would i iterate to get individual routes ?

    methods : {
     getMenuLinks: function() {
    		
    		var t = this.$router.map() ;
            //t returns a vue object instance
    		return t._children ;
            // did not know how to iterate this 
       }
    
     }

I want to iterate all maped routes to get something like below of each mapped route :

    &lt;a v-link=&quot;{ path: &#39;home&#39; }&quot;&gt;Home&lt;/a&gt;

get all routes in a vue router

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.$router.go(-1)`.

    this.$router.go(-1);

vue-router - How to get previous page url?

This may be simple, but I&#39;ve looked over documentation and can&#39;t find anything about it. I want to have my &#39;github&#39; link redirect to say, github.com. However, its just appending &#39;https://github.com&#39; to my url instead of following the link. Here is a snippet:

     &lt;BreadcrumbItem to=&#39;https://github.com&#39;&gt;
        &lt;Icon type=&quot;social-github&quot;&gt;&lt;/Icon&gt;
     &lt;/BreadcrumbItem&gt;

   (This is using iView for custom CSS, but &#39;to&#39; works in the same way as router-link).

What ends up happening is this:
[![enter image description here][1]][1]


  [1]: https://i.stack.imgur.com/sJieR.png

VueJs vue-router linking an external website

I&#39;ve to use two external scripts for the payment gateways. 

Right now both are put in the `index.html` file. 

However, I don&#39;t want to load these files at the beginning itself. 

The payment gateway is needed only in when user open a specific component (`using router-view`). 

Is there anyway to achieve this?

Thanks.

How to add external JS scripts to VueJS Components?

I&#39;d like to make a redirection in `Vue.js` similar to the vanilla javascript

    window.location.href = &#39;some_url&#39;

How could I achieve this in Vue.js?


Vue.js redirection to another page

In my main page I have dropdowns that show `v-show=show` by clicking on link `@click = &quot;show=!show&quot;` and I want to set `show=false` when I change route. Advise me please how to realize this thing.

Vuejs: Event on route change

I am trying to set query params with [Vue-router][1] when changing input fields, I don&#39;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: &quot;q1&quot; } })

But this also refreshes the page and sets the y position to 0, ie scrolls to the top of the page. Is this the correct way to set the URL query params or is there a better way to do it.


----------
Edited:

Here is my router code:

    export default new Router({
      mode: &#39;history&#39;,
      scrollBehavior: (to, from, savedPosition)  =&gt; {
        if (to.hash) {
          return {selector: to.hash}
        } else {
          return {x: 0, y: 0}
        }
      },
      routes: [
        ....... 
        { path: &#39;/user/:id&#39;, component: UserView },
      ]
    })

  [1]: https://github.com/vuejs/vue-router


How to set URL query params in Vue with 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&#39;t find much info.

So my route:

    {
		path: &#39;/offers/:member&#39;,
		component: Offers,
		name: &#39;offers&#39;,
		props: true,
		meta: {
			guest: false,
			needsAuth: true
		}
	},

When I call it with the param programmatically, all is fine

    this.$router.push({ path: /offers/1234 });

However I also need to call it via nav like this

    &lt;router-link to=&quot;/offers&quot;&gt;Offers&lt;/router-link&gt;

The `offers` component accepts the prop

    props: [&#39;member&#39;],

And component used as such

    &lt;Offers :offers=&quot;data&quot; :member=&quot;member&quot;&gt;&lt;/Offers&gt;

Now the ugly way I&#39;ve managed to get it working is duplicating the route and making one of them not take props:

    {
		path: &#39;/offers&#39;,
		component: Offers,
		name: &#39;offers&#39;,
		props: false,
		meta: {
			guest: false,
			needsAuth: true
		}
	},

It actually works, but i&#39;m not happy with it - also in dev mode vuejs is warning me `[vue-router] Duplicate named routes definition: { name: &quot;offers&quot;, path: &quot;/offers&quot; }`

Surely there&#39;s a way to do optional param in the component call `:member=&quot;member&quot;` ?

Optional param in vuejs router

I see in this [pull request][1]:

&gt; - Add a `router.reload()`
&gt;
&gt;     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:

&gt;`Uncaught TypeError: this.$router.reload is not a function`

I searched in the [docs][2], but could not found anything relevant. Does vue/vue-router provider some functionality like this?

The software versions I&#39;m interested in are:

    &quot;vue&quot;: &quot;^2.1.0&quot;,
    &quot;vue-router&quot;: &quot;^2.0.3&quot;,

PS. I know `location.reload()` is one of the alternatives, but I&#39;m looking for a native Vue option.

  [1]: https://github.com/vuejs/vue-router/pull/442
  [2]: https://router.vuejs.org/en/api/router-link.html?q=reload

Do we have router.reload in vue-router?

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: &quot;/link/to/page&quot; })

However, when I route from the summary page to the subpage, I need to open the subpage in a new tab just as one would by adding `_target=&quot;blank&quot;` to an `&lt;a&gt;` tag. 

Is there a way to do this?



Can vue-router open a link in a new tab?

I have a Vue 2 project that has many (50+) [single-file components][1]. 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 string. This file looks like this:

&lt;!-- language-all: lang-js --&gt;

    export default {
      capitalizeFirstLetter(str) {
        return str.charAt(0).toUpperCase() + str.slice(1);
      }
    }

My **main.js** file initializes the app:

    import Vue from &#39;vue&#39;
    import VueResource from &quot;vue-resource&quot;
    import store from &quot;./store&quot;
    import Router from &quot;./router&quot;
    import App from &quot;./components/App.vue&quot;

    Vue.use(VueResource)

    const app = new Vue({
      router: Router,
      store,
      template: &#39;&lt;app&gt;&lt;/app&gt;&#39;,
      components: { App },
    }).$mount(&#39;#app&#39;)

My **App.vue** file contains the template:

&lt;!-- language-all: lang-html --&gt;

    &lt;template&gt;
      &lt;navbar&gt;&lt;/navbar&gt;
      &lt;div class=&quot;container&quot;&gt;
        &lt;router-view&gt;&lt;/router-view&gt;
      &lt;/div&gt;
    &lt;/template&gt;

    &lt;script&gt;
    export default {
      data() {
        return {
          // stuff
        }
      }
    }
    &lt;/script&gt;

I then have a bunch of single-file components, which Vue-Router handles navigating to inside the `&lt;router-view&gt;` tag in the App.vue template.

Now let&#39;s say that I need to use the `capitalizeFirstLetter()` function inside a component that is defined in **SomeComponent.vue**. In order to do this, I first need to import it:

    &lt;template&gt;Some Component&lt;/template&gt;

    &lt;script&gt;
    import {capitalizeFirstLetter} from &#39;../helpers.js&#39;
    export default {
      data() {
        return {
          myString = &quot;test&quot;
        }
      },
      created() {
        var newString = this.capitalizeFirstLetter(this.myString)
      }
    }
    &lt;/script&gt;

This becomes a problem quickly because I end up importing the function into many different components, if not all of them. This seems repetitive and also makes the project harder to maintain. For example if I want to rename helpers.js, or the functions inside it, I then need to go into every single component that imports it and modify the import statement.

**Long story short:** how do I make the functions inside helpers.js *globally* available so that I can call them inside *any* component without having to first import them and then prepend `this` to the function name? I basically want to be able to do this:

    &lt;script&gt;
    export default {
      data() {
        return {
          myString = &quot;test&quot;
        }
      },
      created() {
        var newString = capitalizeFirstLetter(this.myString)
      }
    }
    &lt;/script&gt;


  [1]: https://vuejs.org/v2/guide/single-file-components.html

Vue.js - Making helper functions globally available to single-file components

My page currently has Navigation.vue component.
I want to make the each navigation hover and active. The `hover` works but `active` doesn&#39;t.

This is how Navigation.vue file looks like :


    &lt;template&gt;
      &lt;div&gt;
        &lt;nav class=&quot;navbar navbar-expand-lg fixed-top row&quot;&gt;
          &lt;router-link tag=&quot;li&quot; class=&quot;col&quot; class-active=&quot;active&quot; to=&quot;/&quot; exact&gt;TIME&lt;/router-link&gt;
          &lt;router-link tag=&quot;li&quot; class=&quot;col&quot; class-active=&quot;active&quot; to=&quot;/CNN&quot; exact&gt;CNN&lt;/router-link&gt;
          &lt;router-link tag=&quot;li&quot; class=&quot;col&quot; class-active=&quot;active&quot; to=&quot;/TechCrunch&quot; exact&gt;TechCrunch&lt;/router-link&gt;
          &lt;router-link tag=&quot;li&quot; class=&quot;col&quot; class-active=&quot;active&quot; to=&quot;/BBCSport&quot; exact&gt;BBC Sport&lt;/router-link&gt;
        &lt;/nav&gt;
      &lt;/div&gt;
    &lt;/template&gt;

And the following is the style.

    &lt;style&gt;
    nav li:hover,
    nav li:active {
      background-color: indianred;
      cursor: pointer;
    }
    &lt;/style&gt;

This is how hover looks like now and expected exactly same on active.

[![This is how hover looks like now and expected exactly same on active.][1]][1]

  [1]: https://i.stack.imgur.com/wOVg4.png

I would appreciate if you give me an advice for styling `router-link` active works.
Thanks.

How to VueJS router-link active style

Ok, to explain this simply:

I have 3x pages.

- Page 1 (Home)
- Page 2 (Menu)
- Page 3 (About)

Page 1 has a- 

    &lt;router-link to=&quot;/menu&quot;&gt;

 button that when clicked routes to &quot;/menu&quot;.

For now, Page 2 (Menu) has a 

    &lt;router-link to=&quot;/&quot;&gt;

button and when this button is clicked it reverts to the previous location &quot;/&quot; Page 1 (Home).

But I don&#39;t want to create a component for router for each page to &#39;go back&#39; to the previous page (as if I had 100 pages this could be a lot of work routing back). Is there a way to do this with vue-router? similar to `window.history.back()`

Curious to see if there is a way to do this as I can&#39;t find it in the docs.

Thanks in advance! John





How can I go back/route-back on vue-router?

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. 

How to get current name of route in Vue?

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?

How can I get query parameters from a URL in Vue.js?

I have the following Vuex store (main.js):

```javascript
import Vue from &#39;vue&#39;
import Vuex from &#39;vuex&#39;

Vue.use(Vuex)

//init store
const store = new Vuex.Store({
    state: {
        globalError: &#39;&#39;,
        user: {
            authenticated: false
        }
     },
     mutations: {
         setGlobalError (state, error) {
             state.globalError = error
         }
     }
})

//init app
const app = new Vue({
    router: Router,
    store,
    template: &#39;&lt;app&gt;&lt;/app&gt;&#39;,
    components: { App }
}).$mount(&#39;#app&#39;)
```

I also have the following routes defined for Vue Router (routes.js):

```javascript
import Vue from &#39;vue&#39;
import VueRouter from &#39;vue-router&#39;

Vue.use(VueRouter)

//define routes
const routes = [
    { path: &#39;/home&#39;, name: &#39;Home&#39;, component: Home },
    { path: &#39;/login&#39;, name: &#39;Login&#39;, component: Login },
    { path: &#39;/secret&#39;, name: &#39;Secret&#39;, component: SecretPage, meta: { requiresLogin: true }
]
```

I&#39;m trying to make it so that, if Vuex stores the `user` object, and it has the `authenticated` property set to `false`, is has the router redirect the user to the login page.

I have this:

```javascript
Router.beforeEach((to, from, next) =&gt; {
    if (to.matched.some(record =&gt; record.meta.requiresLogin) &amp;&amp; ???) {
        // set Vuex state&#39;s globalError, then redirect
        next(&quot;/Login&quot;)
    } else {
        next()
    }
})
```

The problem is I don&#39;t know how to access the Vuex store&#39;s `user` object from inside the `beforeEach` function.

I know that I can have the router guard logic inside components using `BeforeRouteEnter`, but that would clutter up each component. I want to define it centrally at the router level instead.



Accessing Vuex state when defining Vue-Router routes

I&#39;m developing a website with vuejs and at this moment I&#39;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 an error (Uncaught TypeError: Cannot read property &#39;page&#39; of undefined)

Does someone know something about this problem and can help me?

PS: I can set the query page using

    this.$router.push({name: &#39;userIndex&#39;, query: { page: &#39;123&#39; } });

and I can get the URL normal params like the

    userID -&gt; (websitename.com/user/:userId | websitename.com/user/1)

but I can&#39;t get any query parameter.

VueJs get url query

I&#39;m trying to redirect to 404.html on page not found using the `router.beforeEach` global hook, without much success (using `Vue`and `Vue-Router` 1.0):
    
    router.beforeEach(function (transition) {
        if (transition.to.path === &#39;/*&#39;) {
            window.location.href = &#39;/404.html&#39;
        } else {
            transition.next()
        }
    });

This is not redirecting to page `404.html` when a non-existing route is inserted, just giving me an empty fragment. Only when hard-coding some-site.com/* will it redirect to the expected some-site.com/404.html

I&#39;m sure there&#39;s something very obvious here that I&#39;m overlooking, but I cannot figure out what.

---

Please note that what I am looking for is a **redirect to a new page, not a redirect to another route**, which could be easily achieved by using `router.redirect` such as in these snippets:

    router.redirect({
        &#39;*&#39;: &#39;404&#39;
    })

Whereas on my `router.map`, I could have the following:

     router.map({
        &#39;/404&#39;: {
            name: &#39;404&#39;
            component: {
                template: &#39;&lt;p&gt;Page Not Found&lt;/p&gt;&#39;
            }
        }
    })

Vue-router redirect on page not found (404)

I would like to specify my titles within the route definition if possible. What is normally specified in `&lt;head&gt;&lt;title&gt;` and appears in the browser title bar.

I have my project set up as follows:

**main.js**

&lt;!-- language: lang-js --&gt;

    import Vue from &#39;vue&#39;
    import App from &#39;./App.vue&#39;
    import VeeValidate from &#39;vee-validate&#39;;
    import router from &#39;./router&#39;
    import ElementUI from &#39;element-ui&#39;;
    import &#39;element-ui/lib/theme-chalk/index.css&#39;;

    Vue.use(VeeValidate);
    Vue.use(ElementUI);
    Vue.config.productionTip = false

    new Vue({
        router,
        render: h =&gt; h(App)
    }).$mount(&#39;#app&#39;)

**router.js**

&lt;!-- language: lang-js --&gt;

    import Vue from &#39;vue&#39;
    import Router from &#39;vue-router&#39;
    import Skills from &#39;./components/Skills.vue&#39;
    import About from &#39;./components/About.vue&#39;
    
    Vue.use(Router)
    
    export default new Router({
      routes: [
        {
          path: &#39;/&#39;,
          name: &#39;skills&#39;,
          component: Skills,
          meta: { title: &#39;Skills - MyApp&#39; } // &lt;- I would to use this one
        },
        {
          path: &#39;/about/:name&#39;,  // Add /:name here
          name: &#39;about&#39;,
          component: About,
          meta: { title: &#39;About - MyApp&#39; }
        }
      ]
    })

Preferably, I would want an automatic system instead of changing page title on the created function of every component. Thanks.




How to change page titles when using vue-router?

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) Error: Redirected from &quot;/login&quot; to &quot;/&quot; via a navigation guard.`

**Login flow**

1. start logged out, but enter a URL that requires auth (i.e. anything besides &quot;/login&quot;)
2. get redirected to &quot;/login&quot; (as expected).
3. login
4. successfully get redirected to starting Url from step #1, except with the above error.

**Login action:**
```js
doLogin({ commit }, loginData) {
  commit(&quot;loginStart&quot;);
  axiosClient
    .post(&quot;/jwt-auth/v1/token&quot;, {
      username: loginData.username,
      password: loginData.password,
    })
    .then((response) =&gt; {
      commit(&quot;loginStop&quot;, null);
      commit(&quot;setUserData&quot;, response.data);
      this.categories = airtableQuery.getTable(&quot;Categories&quot;);
      commit(&quot;setCategories&quot;, this.categories);
      this.locations = airtableQuery.getTable(&quot;Locations&quot;);
      commit(&quot;setLocations&quot;, this.locations);
      router.push(&quot;/&quot;); // push to site root after authentication
    })
    .catch((error) =&gt; {
      console.log(error.response.data.message);
      commit(&quot;loginStop&quot;, error.response.data.message);
      commit(&quot;delUserData&quot;);
    });
},
```
**Router:**
```js
const routes = [
  {
    path: &quot;/login&quot;,
    name: &quot;Login&quot;,
    component: Login,
    meta: { requiresAuth: false },
  },
  {
    path: &quot;/&quot;,
    name: &quot;Home&quot;,
    component: Home,
    meta: { requiresAuth: true },
  },
];

let entryUrl = null;
router.beforeEach((to, from, next) =&gt; {
  let localStorageUserData = JSON.parse(localStorage.getItem(&quot;userData&quot;));
  let storeUserData = state.getters.getUserData;
  let userData = localStorageUserData || storeUserData;
  let isAuthenticated = userData.token !== &quot;&quot; &amp;&amp; userData.token !== undefined;
  if (to.matched.some((record) =&gt; record.meta.requiresAuth)) {
    if (!isAuthenticated) {
      if (to.name !== &quot;Login&quot; &amp;&amp; to.name !== &quot;Home&quot;) {
        entryUrl = to.fullPath;
      }
      next({ name: &quot;Login&quot; });
    } else if (entryUrl) {
      let url = entryUrl;
      entryUrl = null;
      next(url);
    } else {
      next();
    }
  } else {
    next();
  }
});
```




vue-router — Uncaught (in promise) Error: Redirected from &quot;/login&quot; to &quot;/&quot; via a navigation guard

Suppose I have a Vue.js component like this:

    var Bar = Vue.extend({
        props: [&#39;my-props&#39;],
        template: &#39;&lt;p&gt;This is bar!&lt;/p&gt;&#39;
    });
And I want to use it when some route in vue-router is matched like this:

    router.map({
        &#39;/bar&#39;: {
            component: Bar
        }
    });

Normally in order to pass &#39;myProps&#39; to the component I would do something like this:

    Vue.component(&#39;my-bar&#39;, Bar);

and in the html:

    &lt;my-bar my-props=&quot;hello!&quot;&gt;&lt;/my-bar&gt;

In this case, the router is drawing automatically the component in the router-view element when the route is matched.

My question is, in this case, how can I pass the the props to the component?




Passing props to Vue.js components instantiated by Vue-router

In my application some routes are just accessible for authenticated users.&lt;br&gt;When a unauthenticated user clicks on a link, for which he has to be signed in, he will be redirected to the login component.&lt;br&gt;&lt;br&gt;
If the user logs in successfully, **I would like to redirect him to the URL he requested before he had to log in**. However, **there also should be a default route**, in case the user did not request another URL before he logged in.&lt;br&gt;&lt;br&gt;
**How can I achieve this using vue-router?**&lt;br&gt;&lt;hr&gt;
**My code without redirect after login**
&lt;!-- language: javascript --&gt;

    router.beforeEach(
        (to, from, next) =&gt; {
            if(to.matched.some(record =&gt; record.meta.forVisitors)) {
                next()
            } else if(to.matched.some(record =&gt; record.meta.forAuth)) {
                if(!Vue.auth.isAuthenticated()) {
                    next({
                        path: &#39;/login&#39;
                        // Redirect to original path if specified
                    })
                } else {
                    next()
                }
            } else {
                next()
            }
        }        
    )

&lt;br&gt;&lt;br&gt;
**My login function in my login component**
&lt;!-- language: javascript --&gt;

    login() {
        var data = {
            client_id: 2,
            client_secret: &#39;**************&#39;,
            grant_type: &#39;password&#39;,
            username: this.email,
            password: this.password
        }
        // send data
        this.$http.post(&#39;oauth/token&#39;, data)
             .then(response =&gt; {
                 // authenticate the user
                 this.$auth.setToken(response.body.access_token,
                 response.body.expires_in + Date.now())
                 // redirect to route after successful login
                 this.$router.push(&#39;/&#39;)
              })
    }

Redirect to requested page after login using vue-router

I generated a project using vue-cli. I see project has one App.vue which is kinda main layout of the app - if I&#39;m not mistaken. Here I put my basic HTML layout and `&lt;router-view&gt;&lt;/router-view&gt;`. Now the issue is that I need completely different layout for login (different wrappers , body has different classes) but I can&#39;t change it since App.vue has template which is kinda &quot;fixed&quot; as a layout. How to approach this issue? Is there recommended way?

Should I create new component that represents layout so in that case my App.vue template would only have `&lt;router-view&gt;&lt;/router-view&gt;` and then LoginLayout.vue would be included into it?

vuejs application with different layouts (e.g. login layout, page layout, signup etc.)

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: `#!/home`

BUT: `/home`

Thanks!

Vue.js - How to remove hashbang #! from url?

I&#39;m attempting to add a custom handler `InlineButtonClickHandler` to a `&lt;router-link&gt;` component&#39;s `click` event, so that I can emit a custom `appSidebarInlineButtonClick` event.

But, my code isn&#39;t working. What am I doing wrong? 

    &lt;template&gt;
       &lt;router-link :to=&quot;to&quot; @click=&quot;InlineButtonClickHandler&quot;&gt;
         {{ name }}
       &lt;/router-link&gt;
    &lt;/template&gt;

    &lt;script type=&quot;text/babel&quot;&gt;
    export default {
      props: {
        to: { type: Object, required: true },
        name: { type: String, required: true }
      },
      methods: {
        InlineButtonClickHandler(event) {
          this.$emit(&#39;appSidebarInlineButtonClick&#39;);
        }
      }
    } 
    &lt;/script&gt;



Add event listener to &lt;router-link&gt; component using &quot;v-on:&quot; directive - VueJS

I can set scrolling behaviour to Vue.js Router like this:

    const router = new Router({
        mode: &#39;history&#39;,
        routes: [
            {
                path: &#39;/&#39;,
                name: &#39;index&#39;,
                component: Main
            },
            {
                path: &#39;/some-path&#39;,
                name: &#39;some-path&#39;,
                component: SomePath
            }
        ],
        scrollBehavior() {
            return {x: 0, y: 0}
        }
    })

This works perfectly when you click on the link with some page which is not current. When I click on the link which is already rendered, i.e. in the footer, nothing happens. Vue Router assumes there is no state transition. What is the preferred way to scroll up in this case?

All Vue Router Solutions on Gang of Coders

Total of 30 Vue Router Solutions