Vue-路由器beforeRouteEnter Vue-资源请求
Vue-路由器beforeRouteEnter是Vue.js框架中的一个路由守卫钩子函数。它在路由进入前被调用，允许我们在路由组件渲染之前执行一些异步操作。
在beforeRouteEnter中，我们可以访问组件实例this，但是无法访问组件的响应式数据，因为在此时组件实例尚未被创建。因此，我们无法直接在beforeRouteEnter中使用this.$route和this.$router等属性和方法。
在beforeRouteEnter中，我们可以通过传递一个回调函数来获取组件实例。这个回调函数会在路由组件实例创建之后被调用，可以在回调函数中访问组件的响应式数据。
使用beforeRouteEnter可以实现一些需要在路由进入前执行的操作，例如获取数据、进行权限验证等。在这个钩子函数中，我们可以使用axios等工具发送异步请求，获取后端数据，并将数据传递给组件。
以下是一个示例代码：
beforeRouteEnter(to, from, next) {
axios.get('/api/data')
.then(response => {
next(vm => {
vm.data = response.data;
});
})
.catch(error => {
console.error(error);
next();
});
}在上述示例中，我们使用axios发送了一个GET请求获取数据，并将数据传递给组件实例的data属性。在next回调函数中，我们可以访问组件实例，并将获取到的数据赋值给data属性。
在使用beforeRouteEnter时，需要注意以下几点：
- 在beforeRouteEnter中无法直接访问this，需要通过next回调函数来访问组件实例。
- 如果需要在beforeRouteEnter中进行异步操作，可以使用Promise或async/await来处理异步逻辑。
- 如果需要取消导航，可以在next函数中传递一个false参数。
- 如果需要重定向到其他路由，可以在next函数中传递一个路由对象。
推荐的腾讯云相关产品和产品介绍链接地址：
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云云数据库MySQL版：https://cloud.tencent.com/product/cdb_mysql
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云人工智能：https://cloud.tencent.com/product/ai
- 腾讯云物联网平台：https://cloud.tencent.com/product/iotexplorer
- 腾讯云移动推送：https://cloud.tencent.com/product/tpns
- 腾讯云区块链服务：https://cloud.tencent.com/product/tbaas
- 腾讯云视频处理服务：https://cloud.tencent.com/product/vod
- 腾讯云音视频通信（TRTC）：https://cloud.tencent.com/product/trtc
- 腾讯云云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
- 腾讯云云原生数据库TDSQL：https://cloud.tencent.com/product/tdsql
- 腾讯云云原生存储CFS：https://cloud.tencent.com/product/cfs
- 腾讯云元宇宙解决方案：https://cloud.tencent.com/solution/metaverse
相关·内容
为什么vue-路由器中存在beforeRouteEnter导航保护？是否有beforeRouteEnter将被触发，但mounted不会被触发的实例？如果不是，在什么情况下，您更愿意使用beforeRouteEnter而不是mounted？
浏览 0提问于2018-10-12得票数 4
回答已采纳
1回答
我用vue-路由器方法beforeEnter()实现了一个保护beforeEnter()路由的路由保护。
--我试着测试该路由是否只对进行了保护。
我使用Vuejs 2，vue-路由器，Vuex和vue-test-utils.
router.js
import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
export default new Router({
routes: [
..., // other routes
{
path: &#
浏览 0提问于2019-10-14得票数 0
回答已采纳
我正在尝试使用Vue -属性装饰程序包实现vue路由器的。底层，vue-属性装饰器依赖于vue类组件包.它提供了一个registerHooks方法，允许您声明哪些方法应该被视为生命周期挂钩(而不是实例方法)。
以下代码工作正常，在进入路由时会发出警报：
import { Component, Vue } from 'vue-property-decorator';
import { router } from './Router';
@Component({
template: '<div></div>'
})
浏览 0提问于2018-09-03得票数 6
1回答
我在vue-路由器中使用beforeRouteEnter钩子来使用axios从两个不同的端点加载数据。我使用promise.all()加载数据，然后使用next()将其传递给组件。它似乎在开发中工作，但是当它托管在vercel上时，数据不会呈现在组件上。
import axios from "axios"
import NProgress from "nprogress"
export default {
name: "DetailView",
beforeRouteEnter(to, from, next) {
NProgre
浏览 5提问于2021-12-08得票数 2
我对vue.js (和vue-路由器)非常陌生，我正在努力弄清楚如何加载某些页面组件所需的异步数据。根据文档，可以使用这样的beforeRouteEnter来完成：
const Page = {
beforeRouteEnter(to, from, next) {
next(vm => {
vm.foo = {
bar: 'blah'
};
})
},
data() {
return {
foo: null
};
},
template: '<div&
浏览 0提问于2018-09-24得票数 3
我想使用this.$router.go(-n)返回。我想检查一下后路由器的名称，以决定是否返回。如何获取back路由器的名称？请帮帮我。谢谢。
浏览 1提问于2019-11-01得票数 0
3回答
Vue 2和Vue-路由器2
我试图改变我的应用程序的导航条的颜色，基于访问的路线。我现在拥有的是：
main.js：
import App from "../components/App.vue"
const app = new Vue({
router: Router,
template: '<app></app>',
components: { App }
}).$mount('#app')
App.vue：
<template>
<div>
&l
浏览 3提问于2017-02-20得票数 11
回答已采纳
具体来说，我想要做的是呈现像403这样的消息，而不是应该查看的内容，或者自动设置Vue-路由器来改变组件，同时保持相同的url。那么，使用Vue-路由器管理用户访问级别/角色/列表的最佳实践是什么呢？你们是怎么做到的？
浏览 1提问于2017-10-17得票数 1
回答已采纳
我使用vue-路由器的beforeRouteEnter和beforeRouteUpdate从REST中获取数据
<template>
<div>
<h2>{{ league.name }} </h2>
<user-list :users="league.leaderboard" type="list"/>
</div>
</template>
<script>
import UserList from '../components/U
浏览 0提问于2020-04-20得票数 2
1回答
我知道惰性不需要vue路由器，但是我有一个Laravel，我将从vue应用程序中使用它，并响应本地应用程序(移动)，web端(vue app)，我用惰性将它安装在laravel项目中。现在，我想使用具有json响应的Laravel路由，我不想呈现一个惯性对象，但是Link组件在backEnd中接收到这样的惯性响应：
return Inertia::render('...')
当我返回一个apiResponse时:我得到了这个错误：All Inertia requests must receive a valid Inertia response, however a plain
浏览 41提问于2022-11-03得票数 0
1回答
在导航到我所拥有的一些路径之前，尝试找出获取某些数据的最佳方法。
我的路线是：
let routes = [
{
path: '/',
component: require('./views/Home.vue')
},
{
path: '/messages',
component: require('./views/Messages.vue'),
},
{
path: '/posts',
浏览 0提问于2018-11-14得票数 0
回答已采纳
1回答
我使用vue-路由器来控制我的路由，在普通页面中，当我刷新我的浏览器时，它不会犯任何错误。但是当我在路线上使用parmas的时候。我的文件被重定向到下面的路由器。
我的route.js像这样
{
path: '/user/:id',
component: (resolve) => require(['./template/user.vue'], resolve),
meta:{
title:'Personal',
}
}
在我刷新浏览器之前，文件链接类似于这个http://127.0.0.1:
浏览 2提问于2018-04-10得票数 0
回答已采纳
我使用vue-路由器通过用户id导航用户页。router.js看起来如下所示
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/user/:id',
name: 'user',
component: () =>
import(/* webpackChunkName: "user" */ './v
浏览 0提问于2018-11-18得票数 2
回答已采纳
我想从组件的this.$router方法访问Vue路由器created()。但是，它显示了Cannot read property '$router' of null错误。看起来Vue路由器无法从created()方法中访问。还有别的选择吗？
created () {
this.$router.push('/user')
}
浏览 3提问于2017-03-27得票数 0
回答已采纳
日安。
问题定义：
我想在动态路径上部署我的Vue应用程序，该应用程序利用vue-路由器，动态路径应该由WebServer控制，在历史模式下使用vue-路由器，并避免为每个部署重新打包应用程序。
F.e.
在和运行相同的应用程序
由于vue路由器配置是在打包阶段(f.e. )完成的。由webpack)，因此设计不被控制后的包装阶段，使这一简单但如此常见的设置不可行。
此外，vue-具有相当复杂的生命周期，不允许在应用程序级别轻松重写基本设置。
此外，webpack最终将实际资源硬编码到html主体中，这确保了客户端在加载时正确地使用它们，但是由于块是相互依赖的--它们几乎不可能被动态注入/编辑
浏览 3提问于2020-12-21得票数 1
假设我希望在vue-路由器中创建一个AuthService来验证当前会话，然后再转到下一个路由，如下面的示例：
router.beforeEach(function ({ to, next }) {
if (to.path === '/auth-required') {
// return a Promise that resolves to true or false
return AuthService.isLoggedIn()
} else {
next()
}
})
在不使用JSON令牌(JWT)的情况下，Laravel5.1将
浏览 5提问于2016-02-15得票数 4
回答已采纳
在我的记忆中，首先调用挂载的钩子，然后执行beforeRouteEnter中的下一个回调函数。vue路由器文档还说，这是url：。
但是当我测试的时候，结果是不正确的。这是codesanbox url：。
如您所见，首先会记录beforeRouteEnter next回调中的日志。
浏览 49提问于2021-11-10得票数 1
如何更改vue-路由器的子组件中传递的道具？
我使用vue-cli生成一个webpack项目，但我对vue-路由器还是新手。我知道它使用$emit和$on在子组件和父组件之间进行更改，但是如何更改vue-路由器的子组件中传递的道具呢？我不知道哪一个是最重要的元素。
浏览 3提问于2017-04-10得票数 0
我正在开发Vue应用程序。我有主应用程序，在这里我正在加载组件
<template>
<div>
<div id="__layout" v-if="!$route.meta.plainLayout">
<app-navbar></app-navbar>
<div class="container-fluid">
<div class="row">
浏览 0提问于2019-08-05得票数 0
回答已采纳
2回答
vue-路由器文档不涉及此主题。
也许我对vue路由器能够处理这一点的期望说明了我对子域操作方式的基本误解。
这是否可以由vue-路由器来处理，如果是的话，如何处理，如果不能，原因为何？
浏览 7提问于2017-01-14得票数 8
回答已采纳
2回答
所以，我把路由器设置成这样：
const routes = [
{
path: '/',
name: 'HomePage',
component: HomePage,
beforeEnter: checkAuth,
meta: {
requiresAuth: false,
showSidebar: false
}
},
{
path: '/feed',
name: 'FeedPage',
component: FeedPag
浏览 0提问于2019-06-06得票数 1
我有一个页面，其中包含一个路由器视图组件。我在父页面中也有一个按钮，当我单击它时，我会执行一个router.push()，并通过参数将一些对象发送到指定的路由。它工作得很好。但是，如果用户单击F5进行页面刷新，我就不能再明显地将必要的对象发送到我指定的路由，因为我无法捕获页面刷新。我已经对它进行了调试，命名的路由组件在我的父页面被挂载之前就被挂载了，而且似乎没有任何方法可以通知我的路由中的组件它需要来自父页面的对象。是不是不希望路由与父组件紧密耦合？谢谢。 -- Parent component --
<button v-on:click="buttonClick
浏览 32提问于2020-08-23得票数 1
回答已采纳
我注意到，在从原点导航到目的地时，目标组件的created钩子发生在原点的beforeDestroy钩子之前。假设我们有这个路由器：
const router = new VueRouter({
routes: [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
],
})
组件的生命周期挂钩(beforeCreate、created、beforeMount、mounted、activated、deactivated、beforeDestroy、dest
浏览 0提问于2021-03-07得票数 1
回答已采纳
我必须使用许多不同的模块(比如todo模块、文档模块和管理用户的大型用户管理模块)来制作一个big应用程序。总页数> 100页。每个用户的模块访问是不同的。
我正在与Laravel和Vue-路由器合作.
但是，做这件事的最佳做法是什么？
创建一个SPA-应用程序，有一个大的vue-路由器为一切？
每个模块都有自己的"SPA“(有和自己的vue路由器)？
或者其他建议.？
浏览 1提问于2018-04-25得票数 38
回答已采纳
我正在尝试测试我的“Container”组件，它处理表单逻辑。它使用vue-router和vuex存储来分派操作以获取表单详细信息。
我有以下单元代码，它不能按预期工作：
it('On route enter, it should dispatch an action to fetch form details', () => {
const getFormDetails = sinon.stub();
const store = new Vuex.Store({
actions: { getFormDetails }
});
const wra
浏览 0提问于2018-05-31得票数 9
1回答
我的主app.js
从' Vue‘导入语言从'./ language’导入VueI18n从'vue- i18n‘Vue.use(VueI18n) const i18n=新VueI18n({ locale：'en'，messages: language.messages，})导入路由器从./路由器’新Vue({ el：'#app'，i18n，路由器，模板：''，组件：{ App })
The language.js
导出默认{ messages：{ en：{ hello：'hello!‘}，ja：{ hell
浏览 2提问于2017-10-06得票数 7
回答已采纳
我试图保护我的路由器在vue.js。我为用户身份验证做的是，如果用户没有登录，那么他/她将无法访问路由器。这很好，但在以病人身份登录后，如果病人试图访问医生的路由器，它会转到医生配置文件。这意味着我的解决方案只是查看用户是否登录，它不检查是否通过身份验证访问任何其他类型用户的路由器。拜托，任何人给出解决办法
这里是我尝试过的
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth) {
const authUser = JSON.parse(window.localStorage.getItem(
浏览 1提问于2019-10-16得票数 1
回答已采纳
5回答
我正在尝试使用firebase验证一个Vue.js应用程序。
我有一个问题，如果在登录时试图直接访问受登录保护的URL，路由器将在firebase.js有时间返回auth响应之前加载和检查auth状态。这会导致用户被弹到登录页面(当他们已经登录时)。
如何延迟vue-路由器导航，直到从火基检索到auth状态？我可以看到，firebase将auth数据存储在localStorage中，检查是否作为初步身份验证检查是否存在是安全的？理想情况下，最终结果将是在用户通过身份验证时显示一个加载旋转器或其他什么内容，然后他们应该能够访问他们导航到的页面。
路由器/index.js
let router =
浏览 10提问于2017-04-27得票数 19
回答已采纳
我试图通过this.a.app访问vue-路由器中的会话，但是它弹出了一个错误。调试之后，我发现this是未定义的。这是im用来显示this的代码。
我曾尝试使用function(to, from, next) {...}而不是es6语法，但this仍未定义。
router.beforeEach((to, from, next) => {
if (!to.meta.isPublic){
// eslint-disable-next-line
console.log(this)
}
next()
})
是否需要进行任何配置，以便在vue-路由器中访问this？
浏览 2提问于2019-10-18得票数 5
回答已采纳
1回答
应该缓存什么样的数据？
、、、
我正在创建一个带有" PHP“的API，它从DB获取所有响应和数据-我将使用"VueJs”创建前端作为SPA和Vue-资源来发出http请求，使用PHP或JS缓存数据更好吗?应该缓存什么样的数据。数据库将只包含一些文本和图像。
浏览 1提问于2016-09-03得票数 0
回答已采纳
我有以下文件
router.js
import VueRouter from 'vue-router'
export const router = VueRouter({
routes: [
{
...
}
]
})
main.js
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
...
import { router } from './router'
app.
浏览 3提问于2020-12-07得票数 4
回答已采纳
我正在创建一个导航保护程序，用于将用户重定向到某个页面，我从vuex获得了auth状态：
state: {
auth: false,
},
在vue-路由器中，我设置了一个条件:当auth状态为false而路由不是adminAuth时，重定向到adminAuth路由。
var auth = store.state.auth
if (!auth){
if( to.name !== "adminAuth" ){
next( { name: 'adminAuth' } )
}
}
问题是当路由第一次更改时，next()不能正常工作，
浏览 5提问于2020-04-12得票数 0
回答已采纳
我使用Vue路由器和基于文件的组件。我调用了其中一个路由CaseDetail.vue，它获得一个参数(片段)，它从带有axios的API中获取一个json。
我是用“”来做这件事的，这个方法叫做beforeRouteEnter。我把axios的响应传递给下一个方法。
axios.get('/case/'+ to.params.slug +'.json').then((response) => {
next(vm => {
vm.entry = response.data;
})
});
这是可行
浏览 1提问于2018-05-14得票数 0
回答已采纳
嵌套视图，在vue-路由器，是伟大的！
我有几个链接指向他们，就像：
<router-link :to="'/club/'+team.id_team+'/players'">Players</router-link>
如果您知道vue-路由器，您将在这里看到路径项：
“俱乐部”是路由器的路径，他在路由器中的名字是“团队”；
team.id_team是teamId的params
"players“是子路径(其同名为"players”)。
它工作得很好，但我更喜欢用:标记为JSON数据来编写
浏览 0提问于2019-06-29得票数 0
回答已采纳
在我将vue-路由器更新为3.0版本后，vue-路由器上的动态组件替换不再工作了。
我的代码是这样的，它的想法是替换单击事件上的组件。
loadmodule(Name, uri) {
router.addRoutes([
{
path: "/dynamicroute",
component: function(resolve) {
require(["../modules/" + uri + ".vue"], resolve);
}
}
]);
router.push
浏览 0提问于2018-02-13得票数 0
回答已采纳
我用的是router.back()和vue路由器.它可以工作，但我可以预见的问题是，用户可能访问没有历史记录的直接访问。或者用户来自另一个域。
这两种情况都是多余的。如果前面的路线不是正确的Vue路线，我想提供一个替代方案。
因此，在这种情况下，我不想使用router.back()，我想推动类似于this.$router.push({ name: 'deal-list' });的东西
我知道这些路由可以通过route.beforeEach进行检查，并且我已经在router.js文件中使用它来维护我的查询参数如下：
router.beforeEach((to, from, nex
浏览 1提问于2018-01-24得票数 3
回答已采纳
我的Vuejs密码有问题！
我有一个Vuejs应用程序，我在其中安装了Vue-路由器和Vuex！我已经配置了我的路由器，并且在我的存储中有一些操作允许我从我的PHP中提取数据。
问题是，我需要做一些事情(检查localStorage中是否存在Xhr令牌，用存储调度方法执行xhr查询，否则不执行任何操作)，除非用户重新加载页面，否则如果用户使用Vue-路由器系统从一个页面转到另一个页面，则不应该发送请求。
为此，我想在我的VueRouter组件中使用BeforeRouteEnter。但问题是，它在App.Vue中不起作用(我不明白为什么)，而是在与路由相关的其他组件中工作。
然后我尝试使用创建的
浏览 1提问于2018-06-26得票数 0
回答已采纳
在我的路由器中有一个动态路由，在从beforeRouteEnter中的存储调用中获取数据后，我需要设置其路径的最后一部分 beforeRouteEnter (to, from, next) {
if(to.params.categoryId) {
next(vm => {
store.dispatch('getSearchResults', to.params)
.then(res => {
let category = res.data.categories.find(cat => cat.id == to.para
浏览 29提问于2021-05-06得票数 1
回答已采纳
1回答
我用vue-路由器实现了选项卡。当用户在这些选项卡内来回单击，但又喜欢转到上一页时，他需要多次按下" back“才能首先回放每个选项卡。
是否可以将路由从vue-路由器的历史记录中排除，如：
let router = new VueRouter({
mode: 'history',
routes: [
.
.
.
{
path: '/tabs/',
name:
浏览 1提问于2020-03-14得票数 1
回答已采纳
2回答
我在Vue.js + Laravel上有SPA应用程序。授权逻辑，完全委托给Laravel app。但是，当路由发生变化时，我需要检查身份验证状态。我创建了一个小类，它负责它。
export default {
user: {
authenticated : false
},
check: function(context) {
context.$http.get('/api/v1/user').then((response) => {
if (response.body.user != null) {
this.user.authen
浏览 0提问于2016-11-11得票数 0
2回答
我安装了一个新的laravel，一切都编译得很好，但是当我通过npm安装vuex或vue路由器时，编译不再工作了，我得到了以下错误：
错误:必须将vue-加载程序vue-模板编译器安装为对等依赖项，或者必须通过选项传递兼容的编译器实现。
浏览 1提问于2018-12-12得票数 15
1回答
如果我有一个vue-路由器‘路由器-视图’元素定义如下：
<router-view transition="slide">
当一个特定的路由被调用时，是否有一种方法来改变向“淡出”的过渡？
浏览 5提问于2016-08-04得票数 2
回答已采纳
我有问题通过vue路由器生成链接。我在vue-路由器中设置了路由，如下所示：
const routes = [
...
{
path: '/:version/terms-and-conditions',
name: 'Terms',
component: Terms,
alias: ['/:version/privacy-policy']
},
...
]
我可以使用具有参数的路由器链接：
<router-link :to="{name: 'Terms', params: { version:
浏览 4提问于2022-03-16得票数 0
回答已采纳
1回答
如果用户再次尝试转到实际视图，我会尝试隐藏视图。创建切换效果。例如，显示/隐藏模式框。 我尝试了下面的代码： /* Root Instance */
const app = new Vue({
router,
watch: {
'$route' (to, from) {
if (to.path == from.path) {
alert();
router.go(-1);
} else {
alert(to.path + " != " + from.path);
浏览 12提问于2020-08-20得票数 1
1回答
我最近开始用vuejs构建应用程序，有一个小问题我无法解决：
我使用vue-路由器在页面之间跳转，让我说我有一个巨大的列表，其中可能会注入更多的项目与ajax，用户必须滚动，他点击项目，他看到的细节(在新的路线)，当得到返回列表被重新初始化，必须再次滚动到他以前的点。我是否有可能在使用vue-路由器时保持给定组件的状态(并查看类似滚动位置)，还是必须在主应用程序组件中保留一些缓存实例，然后将其映射到init上？
谢谢。
浏览 0提问于2017-10-04得票数 1
回答已采纳
1回答
这让我困惑了一段时间。我已经搜索了相当多，但仍然不知道为什么路由钩子不能在组件中工作：
1.组件从RouterView:加载
<router-view class="z1" :key="$route.name" />
2.我在main.ts**，和** My.vue 中注册了钩子--在类定义之前(为了确保注册就在这里)：
Component.registerHooks([
'beforeRouteEnter',
'beforeRouteLeave',
'beforeRouteUpdate
浏览 0提问于2019-07-05得票数 3
回答已采纳
我试图学习vue-路由器，我有一个问题的vue-cli3 +vue-路由器演示。
此演示程序使用vue create默认创建。我试图最小化演示，但它仍然不起作用。
我是main.js
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
Vue.config.productionTip = false
Vue.use(VueRouter)
const Foo = { template: '<div>foo&l
浏览 0提问于2019-09-01得票数 0
回答已采纳
1回答
这是我写的代码
export let postChapter = (req: Request, res: Response) => {
var chapterInfoModel = mongoose.model(`${req.params.novelId}`, RiChapterScheme);
var array = {
title: req.body.chapterTitle,
content: req.body.chapterContent
};
let newChapterInfo = new chapterIn
浏览 0提问于2019-03-06得票数 1
回答已采纳
1回答
我在一个laravel项目上使用vue-路由器，但是我需要使用laravel路由器作为api，所以我想知道当url包含/api/时如何从vue路由器传递到laravel路由器。我当前的web.php看起来如下所示：
Route::get('/{vue_capture?}', [HomeController::class, 'index'])->where('vue_capture', '[\/\w\.-]*');
浏览 9提问于2022-11-17得票数 0
我有一个Laravel应用程序，它使用webpack编译一些SASS资产。
mix.js('resources/js/vue/User/dashboard.js', 'public/js/User')
.js('resources/js/vue/home.js', 'public/js')
.js('resources/js/vue/admin-dashboard.js', 'public/js/admin')
.sass('resources/sass/app.scss', &
浏览 0提问于2019-07-21得票数 4
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
