提示:本站收集StackOverFlow近2千万问答，支持中英文搜索，鼠标放在语句上弹窗显示对应的参考中文或英文， 本站还提供 中文繁体 英文版本 中英对照 版本，有任何建议请联系yoyou2525@163.com。
在导航到我拥有的某些路由之前，尝试找出什么是获取某些数据的最佳方法。
我的路线是：
let routes = [
{
path: '/',
component: require('./views/Home.vue')
},
{
path: '/messages',
component: require('./views/Messages.vue'),
},
{
path: '/posts',
component: require('./views/Post.vue'),
},
{
path: '/login',
component: require('./views/Login.vue')
},
{
path: '/dashboard',
component: require('./views/Dashboard.vue'),
}
];
对于/ messages ， / posts和/ dashboard，我想获取一些数据，同时显示一个微调框。
Vue-Router文档建议使用beforeRouteEnter， 在导航之前获取
beforeRouteEnter (to, from, next) {
getPost(to.params.id, (err, post) => {
next(vm => vm.setData(err, post))
})
}
但是我的问题是，是否必须在所有三个视图组件中都实现此提取逻辑？ 由于要提取的是相同的数据，所以我不想在每个组件中重复逻辑。
在我具有此<router-view></router-view>根组件中，不会调用beforeRouteEnter，否则我认为这是拥有此逻辑的最佳位置。
我对Vue真的很陌生，这个对我来说真的很难。
您知道vuex吗？ 由于您需要在三个不同的页面上共享相同的数据，这听起来像是vuex存储的一项工作。 基本上，您可以将store导入到路由器中，并在存储中而不是在组件上设置数据，然后可以通过检查存储中数据的状态来有条件地获取数据，如果数据已经存在，则不取。 类似于以下内容：
import store from './store'
beforeRouteEnter (to, from, next) {
if (store.state.post === null) {
getPost(to.params.id, (err, post) => {
store.dispatch('setPost', post)
next()
})
}
}
假设您的store的状态为post ，操作的状态为setPost 。
const store = new Vuex.Store({
state: { post: null },
actions: {
setPost ({ commit }, post) {
// set the post state here
}
}
})
声明：本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.