router.start({
  template: '<router-view></router-view>'
}, '#app')
 

new Vue({
  el: '#app',
  router: router,
  template: '<router-view></router-view>'
})

new Vue({
  el: '#app',
  router: router,
  render: h => h('router-view')
})

router.map({
  '/foo': {
    component: Foo
  },
  '/bar': {
    component: Bar
  }
})

var router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar }
  ]
})
 

// 普通的路由
var routes = [
  // ...
]

// 動態生成的路由
marketingPages.forEach(function (page) {
  routes.push({
    path: '/marketing/' + page.slug
    component: {
      extends: MarketingComponent
      data: function () {
        return { page: page }
      }
    }
  })
})

var router = new Router({
  routes: routes
})

router.match = createMatcher(
  [{
    path: '/my/new/path',
    component: MyComponent
  }].concat(router.options.routes)
)

router.beforeEach(function (transition) {
  if (transition.to.path === '/forbidden') {
    transition.abort()
  } else {
    transition.next()
  }
})

router.beforeEach(function (to, from, next) {
  if (to.path === '/forbidden') {
    next(false)
  } else {
    next()
  }
})

router.redirect({
  '/tos': '/terms-of-service'
})

{
  path: '/tos',
  redirect: '/terms-of-service'
}

router.alias({
  '/manage': '/admin'
})

{
  path: '/admin',
  component: AdminPanel,
  alias: '/manage'
}

alias: ['/manage', '/administer', '/administrate']

'/admin': {
  component: AdminPanel,
  requiresAuth: true
}

{
  path: '/admin',
  component: AdminPanel,
  meta: {
    requiresAuth: true
  }
}

if (route.meta.requiresAuth) {
  // ...
}

export default {
  // ...
  computed: {
    // 此計算屬性將始終是個陣列
    users () {
      const users = this.$route.query.users
      return Array.isArray(users) ? users : [users]
    }
  }
}

<a v-link="'/about'">About</a>

<router-link to="/about">About</router-link>

<li v-link-active>
  <a v-link="'/about'">About</a>
</li>

<router-link tag="li" to="/about">
  <a>About</a>
</router-link>

var router = new VueRouter({
  history: 'true'
})

var router = new VueRouter({
  mode: 'history'
})

var router = new VueRouter({
  abstract: 'true'
})

var router = new VueRouter({
  mode: 'abstract'
})

saveScrollPosition: true

scrollBehavior: function (to, from, savedPosition) {
  return savedPosition || { x: 0, y: 0 }
}

watch: {
  '$route': 'fetchData'
},
methods: {
  fetchData: function () {
    // ...
  }
}

data: function () {
  return {
    posts: [],
    isLoading: false,
    fetchError: null
  }
},
watch: {
  '$route': function () {
    var self = this
    self.isLoading = true
    self.fetchData().then(function () {
      self.isLoading = false
    })
  }
},
methods: {
  fetchData: function () {
    var self = this
    return axios.get('/api/posts')
      .then(function (response) {
        self.posts = response.data.posts
      })
      .catch(function (error) {
        self.fetchError = error
      })
  }
}