Getting Started

We will be using ES2015 in the code samples in the guide.

Creating a Single-page Application with Vue + Vue Router is dead simple. With Vue.js, we are already composing our application with components. When adding vue-router to the mix, all we need to do is map our components to the routes and let vue-router know where to render them. Here's a basic example:

All examples will be using the full version of Vue to make template parsing possible. See more details here.


<script src=""></script>
<script src=""></script>

<div id="app">
  <h1>Hello App!</h1>
    <!-- use router-link component for navigation. -->
    <!-- specify the link by passing the `to` prop. -->
    <!-- `<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>
  <!-- route outlet -->
  <!-- component matched by the route will render here -->


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

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

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

// 3. Create the router instance and pass the `routes` option
// You can pass in additional options here, but let's
// keep it simple for now.
const router = new VueRouter({
  routes // short for `routes: routes`

// 4. Create and mount the root instance.
// Make sure to inject the router with the router option to make the
// whole app router-aware.
const app = new Vue({

// Now the app has started!

By injecting the router, we get access to it as this.$router as well as the current route as this.$route inside of any component:

// Home.vue
export default {
  computed: {
    username () {
      // We will see what `params` is shortly
      return this.$route.params.username
  methods: {
    goBack () {
      window.history.length > 1
        ? this.$router.go(-1)
        : this.$router.push('/')

Throughout the docs, we will often use the router instance. Keep in mind that this.$router is exactly the same as using router. The reason we use this.$router is because we don't want to import the router in every single component that needs to manipulate routing.

You can also check out this example live.

Notice that a <router-link> automatically gets the .router-link-active class when its target route is matched. You can learn more about it in its API reference.

results matching ""

    No results matching ""