• 路由挂钩
    • activate 替换
      • 升级路径
    • canActivate 替换
      • 升级路径
    • deactivate 移除
      • 升级路径
    • canDeactivate 替换
      • 升级路径
    • canReuse: false 移除
      • 升级路径
    • data 替换
      • 升级路径
    • $loadingRouteData 移除

    路由挂钩

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