Vue beforeRouteEnter等待子组件完成请求
Vue beforeRouteEnter是Vue Router提供的一个导航守卫，用于在进入路由前执行一些操作。在这个问题中，我们需要等待子组件完成请求。
在Vue中，beforeRouteEnter是一个路由守卫钩子函数，它可以在路由进入前执行一些逻辑。在beforeRouteEnter中，我们无法直接访问组件实例，因此无法直接调用组件的方法或访问组件的数据。但是我们可以通过传递一个回调函数给beforeRouteEnter来实现等待子组件完成请求的功能。
具体实现步骤如下：
- 在父组件中定义一个回调函数，用于接收子组件完成请求后的数据。
data() {
return {
childData: null
};
},
methods: {
handleChildData(data) {
this.childData = data;
}
}- 在beforeRouteEnter中调用回调函数，并将其作为参数传递给子组件。
beforeRouteEnter(to, from, next) {
next(vm => {
vm.handleChildData = this.handleChildData;
});
}- 在子组件中完成请求后，调用回调函数并传递数据。
// 子组件请求数据的逻辑
mounted() {
// 请求数据
axios.get('/api/data')
.then(response => {
// 调用回调函数传递数据
this.handleChildData(response.data);
})
.catch(error => {
console.error(error);
});
}通过以上步骤，我们可以在父组件中等待子组件完成请求，并获取到子组件返回的数据。
关于Vue Router的更多信息，你可以参考腾讯云的产品文档：Vue Router。
相关·内容
我有一个Vue应用程序，我正在使用beforeRouteEnter加载数据，并避免“闪存的卸载内容”。;} 但当数据驻留在页面的子组件中时，如何让它工作还不清楚。我希望我可以在我的beforeRouteEnter中做一些事情，比如： async beforeRouteEnter(to, from, next) {
await this.$refs.postsList.finishedProm
浏览 114提问于2020-08-20得票数 1
我有一个App.vue组件，我想在其中加载当前登录的用户。我还希望当用户尝试进入登录路由时重定向，并且当前登录的用户已经保存在上下文中(他已经注册了)。= user;}如何在加载App.vue组件之前等待加载数据？AuthService.getCurrentUser().then(curren
浏览 17提问于2017-10-23得票数 14
回答已采纳
1回答
我有几个嵌套的Vue组件，子组件使用AJAX调用加载数据。是否可以让父进程等待完成挂载，直到子进程进行ajax调用并完成呈现？我见过一些使用async created()或beforeRouteEnter: function ( to，from，next)的解决方案，但我似乎不能让它在Fiddle上工作。
浏览 0提问于2018-06-20得票数 0
我有一个页面，其中包含一个路由器视图组件。我在父页面中也有一个按钮，当我单击它时，我会执行一个router.push()，并通过参数将一些对象发送到指定的路由。它工作得很好。我已经对它进行了调试，命名的路由组件在我的父页面被挂载之前就被挂载了，而且似乎没有任何方法可以通知我的路由中的组件它需要来自父页面的对象。是不是不希望路由与父组件紧密耦合？谢谢。/school/:id/tests", component: te
浏览 32提问于2020-08-23得票数 1
回答已采纳
在页面加载时，我正在对产品提出一个获取请求。然后将它设置到vuex商店并使用它。我还为产品页'/product/:id'提供了动态路由。在ProductPage组件中，我尝试使用导航保护，但没有成功。下面的代码返回错误：Cannot read properties of undefined (reading 'products')。Fetch请求是在安装在TheMain组件中时发出的(当我重新加载ProductPage提取请求时也会发出)。Pro
浏览 2提问于2022-07-11得票数 0
我对vue.js (和vue-路由器)非常陌生，我正在努力弄清楚如何加载某些页面组件所需的异步数据。根据文档，可以使用这样的beforeRouteEnter来完成： beforeRouteEnter(to, from, next) { foo: null },
template: '<div>{{ foo.bar }}</d
浏览 0提问于2018-09-24得票数 3
在我vue应用程序中，我有内部路由。问题是，在解决内部路由之前，会显示外部/父路由。component: Base, }});
问题是vue正在等待beforeRouteEnter完成，然后它会显示Home和Base。如果我从Home中的beforeRouterEnter中删除next()，则永远不会显示组件
浏览 0提问于2019-08-04得票数 0
我在母组件中定义了一个对象(称为"propObject")。该propObject通过its服务获取其值，该服务在该母组件中的beforeRouteEnter方法中调用。我必须将这个propObject传递给一个子组件，以便显示内部的内容( "libelle“属性等)。我试着用v绑定和道具来完成它，但是我没有成功。这是我的代码：<template>
<div class="row just
浏览 0提问于2021-05-07得票数 0
我是Vue.js的新手。当用户来自特定路径时，我必须显示一个弹出窗口(分离组件)。我使用beforeRouteEnter (to, from, next)方法获取前面的路径。beforeRouteEnter (to, from, next) { if (from.path === &#
浏览 1提问于2018-02-26得票数 2
回答已采纳
1回答
我在vue-路由器中使用beforeRouteEnter钩子来使用axios从两个不同的端点加载数据。我使用promise.all()加载数据，然后使用next()将其传递给组件。它似乎在开发中工作，但是当它托管在vercel上时，数据不会呈现在组件上。import axios from "axios" name: "DetailView",
b
浏览 5提问于2021-12-08得票数 2
1回答
我对将数据从父组件传递到子组件和模块化策略的最佳实践感到困惑。据我所知，有两种方法：让我们假设一个使用产品编辑视图的用例，具有：
用于编辑基本产品根据我的经验，第一种方法工作顺利，因为它都是在对API的一个请求中完成的:在父组件中获取一
浏览 4提问于2019-12-22得票数 0
1回答
我正在使用Vue、Vuex和Vue-router。这是路由器链路元素的列表。单击时，路由器视图区域中的组件应以动画方式切换，并且路由url应更改。换句话说，旧组件应该完全消失，然后向服务器请求新组件的数据，然后新组件顺利出现。但这并没有发生。单击路由器链接后，新路由的数据将快速加载，新组件将平滑消失，然后它将平滑显示。我做错了什么，一个新的组件消失了？我在beforeRouteEnter和beforeRouteUpd
浏览 1提问于2020-07-29得票数 0
要做到这一点，我读到我需要使用BeforeRouteEnter，但是我很难找到关于如何正确使用它的信息，特别是等待REST完成它的请求。下面是我希望等待完成的方法，然后再路由到我的新组件： const response = await postsService.fetchOneThread
浏览 4提问于2020-04-12得票数 0
回答已采纳
当用户路由到此组件时，将在beforeRouteEnter函数中调用相同的函数。一切都好。 然而，当用户第一次加载它时，preFetchData函数被调用了2次。一次在preFetch中，一次在beforeRouteEnter中。 这是有道理的，因为这就是Vue Router的工作方式。preFetch在服务器上运行，一旦客户端呈现，就会调用beforeRouteEnter。 但是，我不希望Vue在第一次加载时做两次，因为数据已经在存储中，来自服务器端呈现函数preFetch。我不能检查
浏览 79提问于2017-01-11得票数 2
回答已采纳
我从actioncable得到了正确的答案，但是我无法更新前端的消息:您可以查看这个图像：这是我的vue代码： <div class="room-page">type: String, } components: { Message }
export default
浏览 0提问于2018-03-21得票数 2
回答已采纳
我想根据所请求的Route来确定是否应该加载Vue组件。例如，如果用户转到http://todo.example.com/task/123，我想在加载组件之前检查123是否是一个有效的task_id。如果id无效，我将简单地重定向用户，而不必加载组件。我知道vue-feathers在Vue组件上注册了一个$feathers属性，以便能够访问您的羽毛服务。但问题是，在vue-router提供的<e
浏览 37提问于2019-02-19得票数 0
3回答
created事件中的App执行AJAX请求到服务器以获得状态。在mounted事件中，App具有状态的onLoad回调，让开发人员决定下一步该做什么。如何从后端等待状态，只在触发mounted事件之后？
浏览 0提问于2018-01-17得票数 3
回答已采纳
这导致了一些相当简陋的呈现体验，页面执行部分呈现，很快就完成了对来自服务器的数据的呈现，由于现在具有数据的组件的大小变化，导致页面上的所有内容都发生了移动。这看起来相当糟糕，因为数据实际上返回得相当快，所以在呈现新路由之前等待数据返回是很好的。
在呈现页面之前，在页面(及其子组件)上等待Apollo查询完成的推荐方式是什么？我希望看到一个使用beforeRouteEnter通过Apollo获取数据并仅在获取数据后才进入路由的代码示例。
浏览 15提问于2020-01-12得票数 2
2回答
我在Vue.js + Laravel上有SPA应用程序。授权逻辑，完全委托给Laravel app。但是，当路由发生变化时，我需要检查身份验证状态。我创建了一个小类，它负责它。this.user.authenticated = true }, (response) =>{ });在组件中有一个方法beforeRouteEnter (to, from, next) { Auth.check(vm);
if (!Aut
浏览 0提问于2016-11-11得票数 0
store.dispatch('authentication/destroySession'); });
当重定向到另一条路由时，我可以使用VueRouter的Vue Router事件，并检查令牌是否有效且未过期。
浏览 1提问于2019-04-06得票数 3
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
