Hanya Vue Router 2 yang cocok dengan Vue 2, jadi jika Anda memperbarui Vue, Anda diharuskan memperbarui Vue Router juga. Itulah sebabnya kami menyertakan rincian tentang jalur migrasi disini di dokumen utama. Untuk panduan lengkap penggunaan Vue Router yang baru, silakan lihat Dokumen Vue Router

Inisialisasi Router

router.start ^diganti

Tidak ada lagi API spesial untuk menginisialisasi sebuah aplikasi dengan Vue Router. Itu berarti bukannya:

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

Anda mengoper properti router ke sebuah instance Vue:

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

Atau, jika Anda menggunakan build khusus runtime Vue:

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

Definisi Rute

router.map ^diganti

Kini rute didefinisikan sebagai array pada opsi routes pada saat instansiasi router. Jadi rute berikut sebagai contoh:

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

Sebagai gantinya akan didefinisikan dengan:

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

Sintaksis array memungkinkan pencocokan rute yang lebih mudah diprediksi, sejak mengulang-ulang sebuah objek tidak dijamin untuk menggunakan urutan Key yang sama di seluruh peramban.

router.on ^dihapus

Jika Anda perlu membuat rute secara terprogram saat memulai aplikasi Anda, Anda bisa melakukan hal tersebut dengan cara mendorong definisi ke sebuah routes array secara dinamis. Sebagai contoh:

// Basis rute normal
var routes = [
  // ...
]

// Rute yang dibuat secara dinamis
marketingPages.forEach(function (page) {
  routes.push({
    path: '/marketing/' + page.slug
    component: {
      extends: MarketingComponent
      data: function () {
        return { page: page }
      }
    }
  })
})

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

Jika Anda hendak menambahkan rute baru setelah router diinstansiasi, Anda dapat mengganti pencocokan router dengan yang baru yang menyertakan rute yang ingin Anda tambahkan:

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

router.beforeEach ^berubah

router.beforeEach sekarang berfungsi secara tidak sinkron dan menggunakan fungsi next sebagai argumen ketiga.

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()
  }
})

subRoutes ^{berubah nama}

Berubah nama menjadi children untuk konsistensi dalam Vue dan dengan pustaka perutean lainnya.

router.redirect ^diganti

Sekarang ini merupakan sebuah opsi pada definisi rute. Jadi sebagai contoh, Anda akan memperbarui:

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

ke sebuah definisi seperti dibawah ini pada konfigurasi routes Anda:

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

router.alias ^diganti

Sekarang ini merupakan sebuah opsi pada definisi untuk rute yang ingin Anda berikan alias. Jadi sebagai contoh, Anda akan memperbarui:

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

ke sebuah definisi seperti dibawah ini pada konfigurasi routes Anda:

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

Jika Anda menginginkan lebih dari satu alias, Anda dapat juga menggunakan sintaksis array:

<!--13-->

Properti Rute Kewenangan ^diganti

Properti rute kewenangan sekarang harus dicakup dalam properti meta baru, untuk menghindari konflik dengan fitur yang akan datang. Jadi sebagai contoh, jika Anda mendefinisikan:

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

Maka sekarang Anda memperbaruinya menjadi:

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

Lalu ketika nanti mengakses properti ini pada sebuah rute, Anda akan tetap melewati meta. Sebagai contoh:

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

[] Sintaksis untuk Array pada Query ^dihapus

Ketika mengoper satu atau lebih array ke parameter query, sintaksis QueryString tidak lagi /foo?users[]=Tom&users[]=Jerry, tetapi sintaksis yang baru adalah /foo?users=Tom&users=Jerry. Secara internal, $route.query.users akan tetap menjadi sebuah Array, tapi jika hanya ada satu parameter pada query: /foo?users=Tom, lalu mengakses rute ini secara langsung, maka tidak ada cara untuk router mengetahui bahwa kita mengharapkan users menjadi sebuah Array. Dikarenakan hal ini, pertimbangkan untuk menambahkan properti terhitung dan mengganti setiap referensi dari $route.query.users dengan:

export default {
  // ...
  computed: {
    // users will always be an array
    users () {
      const users = this.$route.query.users
      return Array.isArray(users) ? users : [users]
    }
  }
}

Pencocokan Rute

Pencocokan rute sekarang pada dasarnya menggunakan path-to-regexp, membuat hal ini menjadi lebih fleksibel daripada sebelumnya.

Satu atau lebih parameter bernama ^berubah

Sintaksis berubah sedikit, jadi sebagai contoh /category/*tags, perlu diperbarui menjadi /category/:tags+.

Tautan

v-link ^diganti

Direktif v-link diganti dengan komponen <router-link> yang baru, karena jenis pekerjaan ini sekarang hanya menjadi tanggung jawab dari komponen di Vue 2. Ini berarti kapanpun dan dimanapun Anda memiliki tautan seperti ini:

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

Anda harus memperbaruinya menjadi seperti ini:

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

Perlu dicatat bahwa target="_blank" tidak didukung pada <router-link>, jadi jika Anda menginginkan untuk membuka tautan pada tab baru, Anda harus menggunakan <a> sebagai gantinya.

v-link-active ^diganti

Direktif v-link-active juga telah digantikan dengan atribut tag pada komponen <router-link>. Jadi sebagai contoh, Anda memperbarui ini:

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

menjadi ini:

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

<a> akan menjadi tautan yang sebenarnya (dan akan mendapat href yang tepat), tapi kelas yang aktif akan diaplikasikan ke <li> yang diluar.

Navigasi Terprogram

router.go ^diganti

Untuk konsistensi dengan HTML5 History API, sekarang router.go hanya digunakan untuk navigasi back/forward, sedangkan router.push digunakan untuk menavigasikan ke halaman tertentu.

Opsi Router: Mode

hashbang: false ^dihapus

Hashbangs tidak lagi dibutuhkan oleh Google untuk merayapi sebuah URL, jadi mereka tidak lagi menjadi bawaan (atau bahkan sebuah opsi) untuk strategi hash.

history: true ^diganti

Semua opsi mode perutean telah diringkas menjadi opsi mode tunggal. Pembaruan:

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

menjadi:

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

abstract: true ^diganti

Semua opsi mode perutean telah diringkas menjadi opsi mode tunggal. Pembaruan:

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

to:

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

Opsi Rute: Lain-ain

saveScrollPosition ^diganti

Hal ini telah digantikan dengan opsi scrollBehavior yang menerima sebuah function, jadi perilaku gulir sepenuhnya dapat disesuaikan walaupun tiap rute. Ini membuka banyak kemungkinan baru, tapi untuk mengulang perilaku lama dari:

saveScrollPosition: true

Anda dapat menggantikannya dengan:

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

root ^{berubah nama}

Berubah nama menjadi base untuk konsistensi dengan elemen HTML <base>.

transitionOnLoad ^dihapus

This option is no longer necessary now that Vue’s transition system has explicit appear transition control.

suppressTransitionError ^dihapus

Dihapus dikarenakan untuk penyederhanaan kait. Jika Anda benar-benar ingin menekan kesalahan transisi, Anda bisa menggunakan try…catch sebagai gantinya.

Pengait Rute

activate ^diganti

Gunakan beforeRouteEnter di dalam komponen sebagai gantinya.

canActivate ^diganti

Gunakan beforeEnter di dalam rute sebagai gantinya.

deactivate ^dihapus

Gunakan pengait komponen beforeDestroy atau destroyed sebagai gantinya.

canDeactivate ^diganti

Gunakan beforeRouteLeave di dalam komponen sebagai gantinya.

canReuse: false ^dihapus

Tidak ada lagi kasus penggunaan seperti ini di dalam Vue Router yang baru.

data ^diganti

Properti $route sekarang reaktif, jadi Anda dapat menggunakan sebuah watcher untuk memberi reaksi pada perubahan rute, seperti ini:

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

$loadingRouteData ^dihapus

Definisikan sendiri properti Anda (cth: isLoading), kemudian perbarui state pemuatan di dalam sebuah watcher pada rute. Sebagai contoh, jika sedang mengambil data dengan axios:

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
      })
  }
}