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

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

对于 /messages、/posts 和 /dashboard 我想获取一些数据在这样做的同时显示一个微调器。

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

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

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

beforeRouteEnter 没有在我的根组件中调用 <router-view></router-view> 否则我觉得这将是拥有此逻辑的最佳位置。

我真的是 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 在导航之前获取多个组件

Fetching before navigation with multiple components using vue-router

vue.js

vue-router

vue-component