Berhijrah daripada Vue Router 0.7.x

Hanya Vue Router 2 yang serasi dengan Vue 2, jadi jika anda mengemas kini Vue, anda juga perlu mengemas kini Vue Router. Inilah sebabnya kami menambah butiran laluan migrasi dalam dokumentasi utama.
Untuk tutorial lengkap menggunakan Vue Router 2, sila rujuk dokumentasi Vue Router.

Direktori

Permulaan penghala
Definisi laluan
- router.map
- router.on
- router.beforeEach
- subRoutes
- router.alias
- Sebarang atribut Laluan
- Sintaks tatasusunan pertanyaan[] dalam URL
satu atau lebih parameter bernama
Pautan
v-pautan
- v-pautan-aktif
navigasi pengaturcaraan
- penghala. Penghalaan: Mod
hashbang: palsu
- sejarah: benar
- abstrak: benar
- Pilihan penghalaan
Pilihan laluan: Misc
root
- transitionOnLoad
- sekatTransitionError
cangkuk penghalaan

Permulaan Router

>penghala .start

^Penggantian

router.start ^替换

不再会有一个特殊的 API 用来初始化包含 Vue Router 的 app ，这意味着不再是：

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

你只需要传一个路由属性给 Vue 实例：

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

或者，如果你使用的是运行时构建 (runtime-only) 方式：

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

升级方式

运行迁移助手找到 router.start 被调用的示例。

Route 定义

router.map ^替换

路由现在被定义为一个在 router 实例里的一个 routes 选项数组。所以这些路由：

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

会以这种方式定义：

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

考虑到不同浏览器中遍历对象不能保证会使用相同的 property 顺序，这种数组的语法可以保证更多可预测的路由匹配。

升级方式

运行迁移助手找到 router.mapTidak akan ada lagi API khas untuk memulakan apl yang mengandungi Vue Router , yang bermaksud tidak lagi:

// 普通的路由
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
})

Anda hanya perlu menghantar atribut laluan ke contoh Vue: 🎜

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

🎜 Atau, jika anda menggunakan kaedah runtime-only: 🎜

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

🎜🎜Naik taraf kaedah🎜🎜🎜🎜Jalankan Migration Assistant🎜 Cari contoh router.start sedang dipanggil. . : 18px;">🎜router.map🎜🎜🎜 ^penggantian🎜🎜🎜🎜🎜laluan kini ditakrifkan sebagai dalam- penghala Pilihan laluan 🎜array dalam contoh . Jadi laluan ini: 🎜

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

🎜 akan ditakrifkan dengan cara ini: 🎜

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

🎜 Memandangkan melintasi objek dalam penyemak imbas berbeza tidak dijamin untuk menggunakan susunan sifat yang sama, sintaks tatasusunan ini boleh memastikan padanan laluan yang lebih boleh diramal. 🎜

🎜🎜Kaedah naik taraf 🎜🎜🎜🎜Jalankan Migration Assistant🎜 dan cari contoh router.map sedang dipanggil. 🎜🎜

router.on ^{Alih keluar}router.on ^移除

如果你需要在启动的 app 时通过代码生成路由，你可以动态地向路由数组推送定义来完成这个操作。举个例子：

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

如果你需要在 router 被实例化后增加新的路由，你可以把 router 原来的匹配方式换成一个包括你新添的加路由的匹配方式：

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

升级方式

运行迁移助手找到 router.on 被调用的示例。

router.beforeEach ^changed

router.beforeEach 现在是异步工作的，并且携带一个 next 函数作为其第三个参数。

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

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

subRoutes ^换名

出于 Vue Router 和其他路由库一致性的考虑，重命名为children

升级方式

运行迁移助手找到 subRoutes 选项的示例。

router.redirect ^替换

现在用一个路由定义的选项作为代替。举个例子，你将会更新：

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

成像下面的routes配置里定义的样子：

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

升级方式

运行迁移助手找到 router.redirect

Jika anda perlu menjana laluan melalui kod apabila apl dilancarkan, anda boleh menolak definisi secara dinamik ke tatasusunan laluan untuk mencapai operasi ini . Contohnya:

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

🎜Jika anda perlu menambah laluan baharu selepas penghala dimulakan, anda boleh menukar kaedah pemadanan asal penghala kepada kaedah padanan yang termasuk laluan anda yang baru ditambah: 🎜

export default {
  // ...
  computed: {
    // 此计算属性将始终是个数组
    users () {
      const users = this.$route.query.users
      return Array.isArray(users) ? users : [users]
    }
  }
}

🎜Kaedah naik taraf 🎜🎜Jalankan Migration Assistant Cari router.on Contoh daripada dipanggil. 🎜🎜🎜🎜🎜

router.beforeEach< span style="font-size: 18px;"> ^diubah🎜🎜router.beforeEach kini berfungsi secara tidak segerak dan Mengambil next berfungsi sebagai hujah ketiganya. 🎜

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

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

🎜🎜🎜

subRoutes ^{Namakan semula}🎜🎜Demi konsistensi antara Vue Router dan perpustakaan penghalaan lain, namakan semula kepada kanak-kanak🎜

🎜Kaedah naik taraf🎜 🎜Jalankan Migration Helper untuk mencari contoh pilihan subRoutes . 🎜🎜🎜🎜🎜

router.redirect< span style="font-size: 18px;"> ^Ganti🎜🎜Sekarang gunakan satu pilihan yang ditentukan laluan sebaliknya. Sebagai contoh, anda akan mengemas kini: 🎜

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

🎜 seperti yang ditakrifkan dalam konfigurasi laluan di bawah: 🎜

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

🎜Kaedah naik taraf🎜🎜Jalankan Pembantu Migrasi Cari contoh di mana router.redirect dipanggil. 🎜🎜. /essentials/redirect-and-alias.html" target="_blank">Pilihan dalam definisi penghalaan

. Sebagai contoh, anda perlu mengkonfigurasi:

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

dalam definisi laluan anda seperti ini:

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

router.alias ^替换

现在是你进行 alias 操作的路由定义里的一个选项。举个例子，你需要在你的routes定义里将：

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

配置这个样子：

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

如果你需要进行多次 alias 操作，你也可以使用一个数组语法去实现：

saveScrollPosition: true

升级方式

运行迁移助手找到 router.aliasJika anda perlu melakukan beberapa operasi alias, anda juga boleh menggunakan sintaks tatasusunan untuk mencapainya:

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

Kaedah naik taraf

^JalankanMigration Assistant Cari contoh di mana router.alias dipanggil.

Sebarang atribut Laluan

Penggantian

Kini sebarang atribut laluan mesti berada dalam skop atribut meta baharu untuk mengelakkan konflik dengan ciri baharu masa hadapan. Sebagai contoh, jika anda sebelum ini mentakrifkannya seperti ini:

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

anda kini perlu mengemas kininya kepada:

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

Jika anda mengakses harta pada laluan, anda masih akan melepasi meta . Contohnya:

rrreee🎜🎜🎜🎜Kaedah naik taraf🎜🎜🎜🎜Run 🎜Migration Assistant🎜 Cari mana-mana contoh laluan yang tiada dalam skop meta. 🎜🎜

Sintaks tatasusunan pertanyaan[] dalam URL ^Dibuang

Apabila menghantar tatasusunan kepada parameter pertanyaan, sintaks URL bukan lagi /foo?users[]=Tom&rrys[]=Jerry /code>, sebaliknya, sintaks baharu ialah /foo?users=Tom&users=Jerry, maka $route.query.users masih akan menjadi tatasusunan, tetapi jika Terdapat hanya satu parameter dalam pertanyaan ini: /foo?users=Tom Apabila mengakses laluan secara langsung, vue-router tidak akan mengetahui bahawa pengguna yang kami jangkakan adalah tatasusunan. Oleh itu, pertimbangkan untuk menambah harta yang dikira dan menggantikannya di mana-mana anda menggunakan $route.query.users: /foo?users[]=Tom&users[]=Jerry，取而代之，新语法是 /foo?users=Tom&users=Jerry，此时 $route.query.users 将仍旧是一个数组，不过如果在该 query 中只有一个参数：/foo?users=Tom，当直接访问该路由时，vue-router 将无法知道我们期待的 users 是个数组。因此，可以考虑添加一个计算属性并且在每个使用 $route.query.users 的地方以该计算属性代替：

rrreee
Route 匹配
路由匹配现在使用 path-to-regexp 这个包，这将会使得工作与之前相比更加灵活。

一个或者更多的命名参数 ^改变
语法稍微有些许改变，所以以/category/*tags为例，应该被更新为/category/:tags+。
升级方式
运行 迁移助手 找到弃用路由语法的示例。

链接

v-link ^替换
v-link 指令已经被一个新的 <router-link> 组件指令替代，这一部分的工作已经被 Vue 2 中的组件完成。这将意味着在任何情况下，如果你拥有这样一个链接：
rrreee你需要把它更新成：
rrreee注意：<router-link>不支持target="_blank"属性，如果你想打开一个新标签页，你必须用<a>标签。
升级方式
运行 迁移助手 找到 v-linkrrreee
🎜< span style="font-size : 24px;">🎜Padanan laluan 🎜🎜
🎜Padanan laluan kini menggunakan  pakej path-to-regexp, yang akan menjadikan kerja lebih fleksibel daripada sebelumnya. 🎜🎜🎜🎜🎜

🎜🎜Satu atau lebih parameter bernama🎜tukar🎜🎜🎜🎜🎜Sintaks telah berubah sedikit, begitu juga dengan /kategori/*teg contoh, ia harus dikemas kini kepada /category/:tags+. 🎜

🎜🎜Kaedah naik taraf 🎜🎜🎜🎜Jalankan Migration Helper untuk mencari contoh sintaks penghalaan yang ditamatkan. 🎜🎜🎜🎜🎜

🎜Pautan🎜🎜

🎜🎜🎜

🎜🎜v-link🎜🎜🎜🎜 🎜menggantikan 🎜🎜🎜🎜🎜🎜v-link Arahan telah digantikan dengan <router-link> penggantian komponen arahan, bahagian ini kerja telah Disiapkan oleh komponen dalam Vue 2. Ini bermakna dalam apa jua keadaan, jika anda mempunyai pautan seperti ini: 🎜rrreee🎜 anda perlu mengemas kininya kepada: 🎜rrreee🎜 NOTA: <router-link> tidak menyokong target ="_blank" atribut, jika anda ingin membuka tab baharu, anda mesti menggunakan teg <a> 🎜

🎜🎜Kaedah naik taraf 🎜🎜🎜🎜Jalankan Pembantu Migrasi untuk mencari v-link contoh arahan. 🎜🎜

v-link-active ^Penggantianv-link-active ^替换

v-link-active 也因为指定了一个在 <router-link> 组件上的 tag 属性而被弃用了。举个例子，你需要更新：

rrreee

成这个写法：

rrreee

<a>标签将会成为真实的链接 (并且可以获取到正确的跳转)，但是激活的类将会被应用在外部的<li>标签上。

升级方式

运行迁移助手找到 v-link-active 指令的示例

router.go ^改变

为了与 HTML5 History API 保持一致性，router.go 已经被用来作为后退/前进导航，router.push 用来导向特殊页面。

升级方式

运行迁移助手，找到 router.go 和 router.push

v-link-active juga kerana satu dinyatakan dalam <router-link> atribut teg pada komponen dan telah dibuang digunakan. Sebagai contoh, anda perlu mengemas kini:

rrreee🎜 kepada ini: 🎜rrreee🎜 <a> tag akan menjadi pautan sebenar (dan boleh mendapatkan lompatan yang betul), tetapi diaktifkan Kelas akan digunakan kepada teg <li> luaran. 🎜

🎜 Kaedah naik taraf🎜🎜Jalankan Pembantu Migrasi Cari Contoh arahan v-link-active 🎜🎜🎜🎜🎜

🎜🎜🎜

router.go ^Tukar🎜🎜🎜Untuk memadankan HTML5 History API untuk konsistensi, router.go telah Digunakan sebagai navigasi belakang/hadapan, router.push digunakan untuk mengarahkan halaman khas. 🎜

🎜 Kaedah naik taraf🎜🎜Jalankan Pembantu Migrasi dan cari router.go dan router.push dipanggil. 🎜🎜

Penghalaan: Mod

hashbang: false ^移除

Hashbangs 将不再为谷歌需要去爬去一个网址，所以他们将不再成为哈希策略的默认选项。

升级方式

运行迁移助手找到 hashbang: false 选项的示例。

history: true ^替换

所有路由模型选项将被简化成一个单个的mode 选项。你需要更新：

rrreee

成这个写法：

rrreee

升级方式

运行迁移助手找到 history: true 选项的示例。

abstract: true ^替换

所有路由模型选项将被简化成一个单个的mode 选项。你需要更新：

rrreee

成这个写法：

rrreee

升级方式

运行迁移助手找到 abstract: true

🎜 size: 18px;">🎜 ^{Alih keluar}🎜🎜🎜🎜🎜Hashbangs tidak lagi diperlukan untuk Google merangkak URL, jadi ia tidak lagi menjadi pilihan lalai untuk strategi pencincangan. 🎜

🎜🎜Kaedah naik taraf 🎜🎜🎜🎜Jalankan Migration Assistant dan cari hashbang: false contoh pilihan. 🎜🎜🎜🎜🎜

🎜history: true🎜🎜🎜 ^Penggantian🎜🎜🎜🎜Semua pilihan model laluan akan dipermudahkan menjadi satu mod pilihan. Anda perlu mengemas kini: 🎜rrreee🎜 ke dalam tulisan ini: 🎜rrreee

🎜🎜Kaedah naik taraf🎜🎜🎜🎜Jalankan Pembantu Migrasi Cari contoh pilihan history: true. 🎜🎜🎜🎜🎜

🎜abstrak: true🎜🎜🎜 ^Penggantian🎜🎜🎜🎜Semua pilihan model laluan akan dipermudahkan menjadi satu mod pilihan. Anda perlu mengemas kini: 🎜rrreee🎜 ke dalam tulisan ini: 🎜rrreee

🎜🎜Kaedah naik taraf🎜🎜🎜🎜Jalankan Pembantu Migrasi Cari contoh pilihan abstract: true. 🎜🎜

Pilihan penghalaan: Pelbagai

saveScrollPosition ^替换

它已经被替换为可以接受一个函数的 scrollBehavior 选项，所以滑动行为可以完全的被定制化处理 - 甚至为每次路由进行定制也可以满足。这将会开启很多新的可能，但是简单的复制旧的行为：

rrreee

你可以替换为：

rrreee

升级方式

运行迁移助手找到 saveScrollPosition: true 选项的示例。

root ^换名

为了与 HTML 的<base> 标签保持一致性，重命名为 base。

升级方式

运行迁移助手找到 root 选项的示例。

transitionOnLoad ^移除

由于 Vue 的过渡系统 appear transition control 的存在，这个选项将不再需要。

升级方式

运行迁移助手找到 transitionOnLoad: truesaveScrollPosition

: 18px;">

^Penggantian🎜🎜🎜🎜🎜Ia telah digantikan dengan fungsi yang boleh menerima fungsi scrollBehavior pilihan, jadi tingkah laku menatal boleh disesuaikan sepenuhnya - malah disesuaikan untuk setiap laluan. Ini akan membuka banyak kemungkinan baharu, tetapi untuk hanya menyalin tingkah laku lama: 🎜rrreee🎜 anda boleh menggantikannya dengan: 🎜rrreee

Migration Helper Cari contoh pilihan saveScrollPosition: true. 🎜🎜🎜🎜🎜

🎜root🎜🎜 🎜 ^{Namakan semula}🎜🎜🎜🎜Untuk memadankan Teg <base> HTML dinamakan semula kepada base untuk mengekalkan konsistensi. 🎜

🎜🎜Kaedah naik taraf 🎜🎜🎜🎜Jalankan Migration Assistant untuk mencari contoh

root kod> pilihan . 🎜🎜🎜🎜🎜🎜transitionOnLoad🎜🎜 🎜 ^{Dialih keluar}🎜🎜🎜🎜Disebabkan sistem peralihan Vuemuncul< / kod> kawalan peralihan wujud, pilihan ini tidak diperlukan lagi. 🎜

🎜🎜Kaedah naik taraf 🎜🎜🎜🎜Jalankan Pembantu Migrasi dan cari transitionOnLoad: true contoh pilihan. 🎜🎜

tekanTransitionError< kuat> ^{Dialih keluar}suppressTransitionError ^移除

出于简化钩子的考虑被移除。如果你真的需要抑制过渡错误，你可以使用 try…catch 作为替代。

升级方式

运行迁移助手找到 suppressTransitionError: true 选项的示例。

路由挂钩

activate ^替换

使用 beforeRouteEnter 这一组件进行替代。

升级方式

运行迁移助手找到 activate 钩子的示例。

canActivate ^替换

使用beforeEnter 在路由中作为替代。

升级方式

运行迁移助手找到 canActivate

telah dialih keluar untuk memudahkan cangkuk. Jika anda benar-benar perlu menyekat ralat peralihan, anda boleh menggunakan cuba…tangkap sebagai alternatif.

🎜 Kaedah naik taraf🎜🎜Jalankan Pembantu Migrasi Cari Contoh pilihan suppressTransitionError: true. 🎜🎜🎜🎜🎜

Kait laluan

🎜 🎜🎜

aktifkan ^Ganti🎜🎜🎜Gunakan beforeRouteEnter Komponen ini diganti. 🎜

🎜 Kaedah naik taraf🎜🎜Jalankan Pembantu Migrasi Cari Contoh mengaktifkan cangkuk. 🎜🎜🎜🎜🎜

canActivate ^Ganti🎜🎜Gunakan beforeEnter sebagai penggantian dalam laluan. 🎜

🎜 Kaedah naik taraf🎜🎜Jalankan Pembantu Migrasi Cari Contoh canActivate cangkuk. 🎜🎜

nyahaktifkan< kuat> ^{Alih keluar}deactivate ^移除

使用beforeDestroy 或者 destroyed 钩子作为替代。

升级方式

运行迁移助手找到 deactivate 钩子的示例。

canDeactivate ^替换

在组件中使用beforeRouteLeave 作为替代。

升级方式

运行迁移助手找到 canDeactivate 钩子的示例。

canReuse: false ^移除

在新的 Vue 路由中将不再被使用。

升级方式

运行迁移助手找到 canReuse: false 选项的示例。

data ^替换

$route属性是响应式的，所以你可以就使用一个 watcher 去响应路由的改变，就像这样：

rrreee

升级方式

运行迁移助手找到 data

Gunakan < kod>sebelum Musnah atau dimusnahkan< / a> cangkuk sebagai alternatif.

🎜 Kaedah naik taraf🎜🎜Jalankan Pembantu Migrasi Cari Contoh nyahaktifkan cangkuk. 🎜🎜🎜🎜🎜

bolehNyahaktifkan ^Penggantian🎜🎜Gunakan dalam komponen beforeRouteLeave sebagai alternatif. 🎜

🎜 Kaedah naik taraf🎜🎜Jalankan Pembantu Migrasi Cari Contoh canDeactivate cangkuk. 🎜🎜🎜🎜🎜

canReuse: false< span style="font-size: 18px;"> ^{Alih keluar}🎜🎜 tidak akan digunakan lagi dalam laluan Vue baharu. 🎜

🎜 Kaedah naik taraf🎜🎜Jalankan Pembantu Migrasi Cari Contoh pilihan canReuse: false. 🎜🎜🎜🎜🎜

data ^penggantian🎜🎜 atribut$route responsif, jadi anda hanya boleh menggunakan satu respons pemerhati kepada perubahan penghalaan, seperti ini: 🎜rrreee

🎜Kaedah naik taraf🎜🎜Jalankan Pembantu Migrasi Cari contoh cangkuk data. 🎜🎜

$loadingRouteData ^{Alih keluar}$loadingRouteData ^移除

定义你自己的属性 (例如：isLoadingTentukan sifat anda sendiri (contohnya: isLoading), dan kemudian kemas kini status pemuatan dalam pemerhati pada laluan . Contohnya, jika anda menggunakan axios

untuk mendapatkan data:

rrreee

🎜

← Berhijrah dari Vue 1.x

Berhijrah daripada Vuex 0.6.x kepada 1.0 →

serahkan

Berhijrah daripada Vue Router 0.7.x

>penghala .start

Route 定义

Route 匹配

链接

< span style="font-size : 24px;">🎜Padanan laluan 🎜🎜

🎜Pautan🎜🎜

编程导航

Navigasi Pengaturcaraan< /span>

Penghalaan: Mod

Pilihan penghalaan: Pelbagai

路由挂钩

Kait laluan

Laman web PHP Cina