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

Posted 2023-02-23

【中文标题】使用 vue-router 在导航前获取多个组件

【英文标题】：Fetching before navigation with multiple components using vue-router

【发布时间】：2019-04-17 19:00:34

【问题描述】：

在导航到我拥有的一些路线之前，试图找出获取一些数据的最佳方法。

我的路线是：

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 新手，这对我来说真的很难破解。

【参考方案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
    
  
)

【讨论】：

Vuex 听起来很不错，我去看看 tnx！但我仍然需要在每个组件上都有这段代码，以检查我是否已将数据提取到商店？

您不需要在组件上使用它。第一部分位于您使用beforeRouteEnter 有条件地获取数据的路由器文件中。第二部分单独位于 store.js 中，它充当应用程序的集中数据存储，可以通过语法 this.$store

从所有组件和页面访问

beforeRouteEnter 似乎只在组件 router.vuejs.org/guide/advanced/… 中可用。或者你的意思是我把支票放在路由器文件中的beforeEach？

是的。这就是我想说的。基本上使用beforeEach 检查路由器中的路由和存储状态，或者如果您不介意在三个页面中的每一页中设置逻辑，那么我猜beforeRouteEnter 也是可行的，特别是如果您将所有逻辑重构到存储操作中, 那么你在组件中需要做的就是beforeRouteEnter (to, from, next) this.$store.dispatch('getPost', to.params.id)