繁体   English   中英

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

Fetching before navigation with multiple components using vue-router

提示:本站收集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真的很陌生,这个对我来说真的很难。

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
    }
  }
})
2 [Vue][Vue-Router] 在多个组件中使用props

我在玩 vue、vue-router 和 props,但现在我不确定我是否以正确的方式去做。 我有一个这样的入口组件,一个入口组件应该链接到类似 entryDetails/:id 的东西: 入口.vue 还有一个带有条目列表的组件: entryList.vue 现在,当我单击一个条目 ...

3 Vue-路由器动态组件

我正在尝试使用vue-router创建一个单页vue.js应用程序。 默认路由(/)应该是指向其他页面(如登录页面)的链接的列表。 到目前为止,所有其他页面都是针对不同情况的对话框。 我希望尽可能直接地创建新对话框,因此我创建了一个基本对话框页面,该页面设置了通用对话框外观,同时将详细信息 ...

4 使用导航卫士的Vue.js Vue路由器问题

我正在尝试使用路由器的导航保护...当我使用它时,会显示App组件(导航标题),但不会显示子HomePage组件...如果我摆脱了导航保护,就没问题了App和HomePage组件显示良好 在这种情况下,我的导航卫士用法有什么问题? 路由器/ index.js main.js ...

6 Vue-router 导航守卫

我想做一个路由器守卫,但我不知道为什么我不能。 setAuthentication == true if部分是好的,但else部分不是。 我希望只有当setAuthentication为true时setAuthentication访问KrediForm页面此代码必须有效但它不起作用我不知道为什么还 ...

8 vue-router:使用命名视图时将props传递给组件

我在我的vue-router中使用命名视图 。 在两个组件内部,我需要获得道具。 以下代码显示了路由的定义。 第一个条目不起作用。 在组件内部,道具将保持未定义。 所以Breadcrumb和Collection组件没有任何属性 第二个例子有效,因为只有一个组件: 我认 ...

9 需要帮助使用vue-router加载组件

我有一个名为App的主要默认组件,其中有一个导航栏和一个带有按钮的图像,当我单击该按钮时,我想加载另一个视图,但是我不知道如何执行此操作,因此我尝试使用router.push和router.go,但是它什么也不做,如果我使用router-view,它将在“图像”组件下加载其他组件,而我不希望那样,这 ...

10 Vue-Router数据获取仅一次

我目前正在使用Vue路由器的beforeEnter挂钩来检索我的一条路线的数据。 该流程的一个简单示例为: 如何防止第二个过时的API调用? 因为数据是最新并不重要。 我可以这样做: if (!dataIsAlreadyThere) loadData() ,但是对于许多路由来 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM