路由挂钩

activate 替换

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

升级路径

运行 迁移路径 找到 activate 钩子的示例。

canActivate 替换

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

升级路径

运行 迁移路径 找到 canActivate 钩子的示例。

deactivate 移除

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

升级路径

运行 迁移路径 找到 deactivate 钩子的示例。

canDeactivate 替换

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

升级路径

运行 迁移路径 找到 canDeactivate 钩子的示例。

canReuse: false 移除

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

升级路径

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

data 替换

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

  1. watch: {
  2. '$route': 'fetchData'
  3. },
  4. methods: {
  5. fetchData: function () {
  6. // ...
  7. }
  8. }

升级路径

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

$loadingRouteData 移除

定义你自己的属性 (例如:isLoading),然后在路由上的 watcher 中更新加载状态。举个例子,如果使用 axios 获取数据:

  1. data: function () {
  2. return {
  3. posts: [],
  4. isLoading: false,
  5. fetchError: null
  6. }
  7. },
  8. watch: {
  9. '$route': function () {
  10. var self = this
  11. self.isLoading = true
  12. self.fetchData().then(function () {
  13. self.isLoading = false
  14. })
  15. }
  16. },
  17. methods: {
  18. fetchData: function () {
  19. var self = this
  20. return axios.get('/api/posts')
  21. .then(function (response) {
  22. self.posts = response.data.posts
  23. })
  24. .catch(function (error) {
  25. self.fetchError = error
  26. })
  27. }
  28. }