[Vuejs]-How to use router-link custom navigation instead of `to` prop

by

0đź‘Ť

Something like this you mean?

<a @click="functionThatExecutesMyCode">
  <span class="icon icon-home i-large" />
  <span class="class-2">Name</span>
</a>

functionThatExecutesMyCode() {
   this.$router.push({ to: 'newRoute'})
}

Else you should use the navigation guards: https://router.vuejs.org/guide/advanced/navigation-guards.html

0đź‘Ť

I don’t think it’s possible to change :to props to add a function, because it is predefined as only accept a string in its docs. https://router.vuejs.org/api/#to

However, I suggest another way to implement what you want, you can add the logic in beforeEach hook. For example

router.beforeEach( (to, from, next) => {

  // implement your logic here, for example if no internet, go to error page

  if (!navigator.onLine && to.name !== "NetworkError") {
    next({ name: "NetworkError" });
    return false;
   }
  next();
}

For more info, look at their docs: https://router.vuejs.org/api/#router-beforeeach

0đź‘Ť

It depends on what you exactly want.

There are easier solutions, like:

const Root = {
  template: '<div>Root</div>'
}
const Route1 = {
  template: '<div>Route1</div>'
}

const routes = [{
    path: '/',
    name: 'root',
    component: Root
  },
  {
    path: '/1',
    name: 'route1',
    component: Route1
  }
]

const router = new VueRouter({
  routes // short for `routes: routes`
})

new Vue({
  el: "#app",
  router,
  data: {
    selected: 'root',
    options: ['root', 'route1']
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
  <select v-model="selected">
    <option v-for="(option, i) in options">
      {{ option }}
    </option>
  </select>
  <router-view></router-view>
  <router-link :to="{ name: selected }">{{ selected }}</router-link>
</div>

In this solution I used a named route, and the “name” can be changed by the select input.

The next solution is to incorporate a function:

const Root = {
  template: '<div>Root</div>'
}
const Route1 = {
  template: '<div>Route1</div>'
}

const routes = [{
    path: '/',
    name: 'root',
    component: Root
  },
  {
    path: '/1',
    name: 'route1',
    component: Route1
  }
]

const router = new VueRouter({
  routes // short for `routes: routes`
})

new Vue({
  el: "#app",
  router,
  data: {
    selected: 'root',
    options: ['root', 'route1']
  },
  methods: {
    changeRouteName() {
      return this.selected
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
  <select v-model="selected">
    <option v-for="(option, i) in options">
      {{ option }}
    </option>
  </select>
  <router-view></router-view>
  <router-link :to="{ name: changeRouteName() }">{{ selected }}</router-link>
</div>

By adding a method to resolve the name of the component, it’s possible to build ANY logic on the to of the <router-link. You could also use path instead of name of course – I just like named components.

It does not remove the click event from the to prop, but you can do your logic before returning the name it’s “waiting” for.

Leave a comment