Vue.js 2 Design Patterns and Best Practices

Programmatic navigation

We're not limited to template navigation using router-link; we can also programmatically navigate the user to different routes from within our JavaScript. Inside of our App.vue, let's expose the <router-view> and give the user the ability to select a button that will navigate them to either the /hello or /hello/:name route:

<template>  <div id="app">    <nav>      <button @click="navigateToRoute('/hello')">/Hello</button>      <button        @click="navigateToRoute('/hello/Paul')">/Hello/Name</button>    </nav>    <router-view></router-view>  </div></template>

We can then add a method that pushes a new route onto the route stack:

<script>export default {  methods: {    navigateToRoute(routeName) {      this.$router.push({ path: routeName });    },  },}; ...