Skip to content

Latest commit

 

History

History
602 lines (464 loc) · 18 KB

migration-vue-router.md

File metadata and controls

602 lines (464 loc) · 18 KB
judul tipe urutan
Migrasi dari Vue Router 0.7.x
panduan
702

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

{% raw %}

Jalur Peningkatan

Jalankan pembantu migrasi pada basis kode Anda untuk mencari contoh dari pemanggilan router.start

{% endraw %}

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.

{% raw %}

Jalur Peningkatan

Jalankan pembantu migrasi pada basis kode Anda untuk mencari contoh dari pemanggilan router.map

{% endraw %}

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

{% raw %}

Jalur Peningkatan

Jalankan pembantu migrasi pada basis kode Anda untuk mencari contoh dari pemanggilan router.on

{% endraw %}

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.

{% raw %}

Jalur Peningkatan

Jalankan pembantu migrasi pada basis kode Anda untuk mencari contoh pemanggilan subRoutes

{% endraw %}

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

{% raw %}

Jalur Peningkatan

Jalankan pembantu migrasi pada basis kode Anda untuk mencari contoh pemanggilan router.redirect

{% endraw %}

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:

{% codeblock lang:js %}

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

{% endcodeblock %}

{% raw %}

Jalur Peningkatan

Jalankan pembantu migrasi pada basis kode Anda untuk mencari contoh pemanggilan router.alias

{% endraw %}

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) {
  // ...
}

{% raw %}

Jalur Peningkatan

Jalankan pembantu migrasi pada basis kode Anda untuk mencari contoh properti rute kewenangan yang tidak tercakup pada meta.

{% endraw %}

[] 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+.

{% raw %}

Jalur Peningkatan

Jalankan pembantu migrasi pada basis kode Anda untuk mencari contoh sintaksis rute yang sudah usang.

{% endraw %}

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.

{% raw %}

Jalur Peningkatan

Jalankan pembantu migrasi pada basis kode Anda untuk mencari contoh dari direktif v-link.

{% endraw %}

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.

{% raw %}

Jalur Peningkatan

Jalankan pembantu migrasi pada basis kode Anda untuk mencari contoh dari direktif v-link-active.

{% endraw %}

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.

{% raw %}

Jalur Peningkatan

Jalankan pembantu migrasi pada basis kode Anda untuk mencari contoh dari penggunaan router.go dimana router.push harus digunakan sebagai gantinya.

{% endraw %}

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.

{% raw %}

Jalur Peningkatan

Jalankan pembantu migrasi pada basis kode Anda untuk mencari contoh dari opsi hashbang: false.

{% endraw %}

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

{% raw %}

Jalur Peningkatan

Jalankan pembantu migrasi pada basis kode Anda untuk mencari contoh dari opsi history: true.

{% endraw %}

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

{% raw %}

Jalur Peningkatan

Jalankan pembantu migrasi pada basis kode Anda untuk mencari contoh dari opsi abstract: true.

{% endraw %}

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

{% raw %}

Jalur Peningkatan

Jalankan pembantu migrasi pada basis kode Anda untuk mencari contoh dari opsi saveScrollPosition: true.

{% endraw %}

root berubah nama

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

{% raw %}

Jalur Peningkatan

Jalankan pembantu migrasi pada basis kode Anda untuk mencari contoh dari opsi root.

{% endraw %}

transitionOnLoad dihapus

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

{% raw %}

Jalur Peningkatan

Jalankan pembantu migrasi pada basis kode Anda untuk mencari contoh dari opsi transitionOnLoad: true.

{% endraw %}

suppressTransitionError dihapus

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

{% raw %}

Jalur Peningkatan

Jalankan pembantu migrasi pada basis kode Anda untuk mencari contoh dari opsi suppressTransitionError: true.

{% endraw %}

Pengait Rute

activate diganti

Gunakan beforeRouteEnter di dalam komponen sebagai gantinya.

{% raw %}

Jalur Peningkatan

Jalankan pembantu migrasi pada basis kode Anda untuk mencari contoh dari pengait beforeRouteEnter.

{% endraw %}

canActivate diganti

Gunakan beforeEnter di dalam rute sebagai gantinya.

{% raw %}

Jalur Peningkatan

Jalankan pembantu migrasi pada basis kode Anda untuk mencari contoh dari pengait canActivate.

{% endraw %}

deactivate dihapus

Gunakan pengait komponen beforeDestroy atau destroyed sebagai gantinya.

{% raw %}

Jalur Peningkatan

Jalankan pembantu migrasi pada basis kode Anda untuk mencari contoh dari pengait deactivate.

{% endraw %}

canDeactivate diganti

Gunakan beforeRouteLeave di dalam komponen sebagai gantinya.

{% raw %}

Jalur Peningkatan

Jalankan pembantu migrasi pada basis kode Anda untuk mencari contoh dari pengait canDeactivate.

{% endraw %}

canReuse: false dihapus

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

{% raw %}

Jalur Peningkatan

Jalankan pembantu migrasi pada basis kode Anda untuk mencari contoh opsi canReuse: false.

{% endraw %}

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 () {
    // ...
  }
}

{% raw %}

Jalur Peningkatan

Jalankan pembantu migrasi pada basis kode Anda untuk mencari contoh dari pengait data.

{% endraw %}

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

{% raw %}

Jalur Peningkatan

Jalankan pembantu migrasi pada basis kode Anda untuk mencari contoh dari properti meta $loadingRouteData.

{% endraw %}