- 路由挂钩
- activate 替换
- 升级路径
- canActivate 替换
- 升级路径
- deactivate 移除
- 升级路径
- canDeactivate 替换
- 升级路径
- canReuse: false 移除
- 升级路径
- data 替换
- 升级路径
- $loadingRouteData 移除
- activate 替换
路由挂钩
activate 替换
使用 beforeRouteEnter
这一组件进行替代。
升级路径
运行 迁移路径 找到 activate
钩子的示例。
canActivate 替换
使用beforeEnter
在路由中作为替代。
升级路径
运行 迁移路径 找到 canActivate
钩子的示例。
deactivate 移除
使用beforeDestroy
或者 destroyed
钩子作为替代。
升级路径
运行 迁移路径 找到 deactivate
钩子的示例。
canDeactivate 替换
在组件中使用beforeRouteLeave
作为替代。
升级路径
运行 迁移路径 找到 canDeactivate
钩子的示例。
canReuse: false 移除
在新的 Vue 路由中将不再被使用。
升级路径
运行 迁移助手 找到 canReuse: false
选项的示例。
data 替换
$route
属性是响应式的,所以你可以就使用一个 watcher 去响应路由的改变,就像这样:
watch: {
'$route': 'fetchData'
},
methods: {
fetchData: function () {
// ...
}
}
升级路径
运行 迁移助手 找到 data
钩子的示例。
$loadingRouteData 移除
定义你自己的属性 (例如:isLoading
),然后在路由上的 watcher 中更新加载状态。举个例子,如果使用 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
})
}
}