Question

在导航到我拥有的某些路由之前，试图弄清楚什么是获取某些数据的最佳方法。

我的路线是：

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'),
    }
];

对于 /消息， /帖子和 /仪表板，我想获取一些数据，同时显示一个微调框。

Vue-router文档建议使用beforeRouteEnter Fetching Before Navigation

beforeRouteEnter (to, from, next) {
    getPost(to.params.id, (err, post) => {
        next(vm => vm.setData(err, post))
    })
}

但是我的问题是，是否必须在所有三个视图组件中都实现此提取逻辑？由于要提取的是相同的数据，所以我不想在每个组件中重复逻辑。

在我拥有此<router-view></router-view>的根组件中未调用 beforeRouteEnter ，否则我认为这是拥有此逻辑的最佳位置。

我对Vue真的很陌生，这个对我来说真的很难。

Answer 1

您知道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
    }
  }
})

使用vue-router在导航多个组件之前获取

1 个答案: