Vue.js Routing: Setup, Configuration

The officially-supported vue-router library is recommended for most Single Page Applications.

It integrates deeply with Vue.js core to make building Single Page Application with Vue.js a breeze. Its features include:

• view mapping/ nested route
• Component/ Modular-based router configuration
• Route query, params, wildcards
• View transition effects which are powered by Vue.js' transition system
• It has Fine-grained navigation control
• Links well with automatic active CSS classes
• It has HTML5 history mode or hash mode, and with auto-fallback in IE9
• It has customizable Scroll Behavior

Simple Routing From Scratch

If we only need very simple routing and do not wish to involve a full-featured router library, we can do so by dynamically rendering a page-level component like this:

const NotFound = { template: '
Page not found
' }
const Home = { template: '<p>home page</p>' }
const About = { template: '<p>about page</p>' }

const routes = {
  '/': Home,
  '/about': About
}

new Vue({
  el: '#app',
  data: {
    currentRoute: window.location.pathname
  },
  computed: {
    ViewComponent () {
      return routes[this.currentRoute] || NotFound
    }
  },
  render (h) { return h(this.ViewComponent) }
})

When combined with HTML5 History API, we can build a very basic but fully functional client-side router.

Below is an example of using the Vue Router for routing in a single page application:

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-we need to use router-link component for navigation. -->
    <!-then we specify the link by passing the `to` prop. -->
    <!-the `<router-link>` will be rendered as an `<a>` tag by default -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-the route outlet -->
  <!-the component that is matched by the route will render here -->
  <router-view></router-view>
</div>

JS

// 0. when using a module system (e.g. via vue-cli), import Vue and VueRouter and then
// call `Vue.use(VueRouter)`.

// 1. Then define route components.
// These components can be imported from other files
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2. Then you need to define some routes
// Each of the route should map to a component. The "component" can either
// be an actual component constructor created via `Vue.extend()`,
// or it could be just a component options object.
// We'll talk about nested routes later on.
const routes = [
  { path: '/bar', component: Bar },
  { path: '/foo', component: Foo }
]

// 3. We then create the router instance and pass the `routes` option
// You can pass in some additional options here, but we will keep
// it simple for now.
const router = new VueRouter({
  routes // short for `routes: routes`
})

// 4. Create and then mount the root instance.
// Making sure to inject the router with the router option to make the whole
// app router-aware.
const app = new Vue({
  router
}).$mount('#app')

// Now the app starts!

Integrating 3rd-Party Routers

If there's a 3rd-party router we prefer to use, such as Director or Page.js, integration is similarly easy.

Previous: Vue.js Production Deployment: Best Practices and Configuration
Next: Vue.js State Management with Vuex.