将异步组件与Vue Router中的加载和错误组件一起使用
异步组件是指在需要时才会被加载的组件。在Vue.js中，可以使用异步组件来优化应用的性能，减少初始加载时间。
在Vue Router中，可以将异步组件与加载和错误组件一起使用，以提供更好的用户体验和错误处理。
加载组件是在路由导航过程中显示的组件，用于展示加载状态或者加载动画。可以使用Vue Router提供的<router-view>组件来显示加载组件。
错误组件是在路由导航过程中出现错误时显示的组件，用于展示错误信息或者错误页面。可以使用Vue Router提供的<router-view>组件来显示错误组件。
使用异步组件与Vue Router中的加载和错误组件可以提高应用的性能和用户体验。当用户访问某个路由时，只有该路由对应的组件会被加载，而不是一次性加载所有组件。这样可以减少初始加载时间，并且在路由导航过程中显示加载组件，让用户知道正在加载内容。
如果在加载过程中出现错误，可以显示错误组件，提供错误信息或者错误页面给用户。这样可以更好地处理错误情况，并且给用户一个友好的提示。
在腾讯云的云计算平台中，推荐使用腾讯云的Serverless云函数（SCF）来实现异步组件的加载和错误处理。SCF是一种无服务器计算服务，可以根据实际需求自动弹性伸缩，无需关心服务器的运维和管理。使用SCF可以实现异步加载组件，并且在加载过程中出现错误时，可以通过SCF的错误处理机制来显示错误组件。
更多关于腾讯云Serverless云函数（SCF）的信息和产品介绍，可以访问腾讯云官网的SCF产品页面：腾讯云Serverless云函数（SCF）
总结：异步组件与Vue Router中的加载和错误组件一起使用可以提高应用的性能和用户体验。推荐使用腾讯云的Serverless云函数（SCF）来实现异步组件的加载和错误处理。
相关·内容
1回答
import Vue from 'vue';
import Router from 'vue-router';
//
// Application routes
//
const appRoutes = []
//
// let's add 404 page
// in the case we have landed on non-processed URL
//
import PageNotFound from '@/lib/components/page-not-found';
appRoutes.push({
path
浏览 0提问于2018-06-26得票数 0
当我在Vue 3中使用async setup ()时，组件就会消失。我用了这里找到的解决方案： .它起作用了，但是当我使用router-view时，我有一个空白页面。
<template>
<div v-if="error">{{error}}</div>
<Suspense>
<template #default>
<router-view></router-view>
</template>
浏览 6提问于2020-10-09得票数 7
回答已采纳
1回答
我试图在一个laravel项目中将许多Vue.js组件加载到我的app.js文件中(使用browserify/vueify通过灵丹妙药)。
我不想一次加载每个组件，而是在需要时使用来延迟加载各个vue组件。
我应该在哪里设置partition bundle json文件，以及应该如何构造它？
目前，我已经绑定了以下我的主要app.js文件：
import Vue from 'vue';
import Resource from 'vue-resource';
import VueRouter from 'vue-router';
// Thes
浏览 1提问于2016-05-17得票数 7
加载屏幕时，全局函数init()会输出控制台日志。但是，单击子组件按钮不会重新启用init()功能。 当我单击子组件中的按钮时，如何调用全局函数init()？ App.vue (父级) <template>
<div id="app">
<div id="nav">
<router-link :to="{name: 'home'}">Home</router-link> |
<router-link :to="{name
浏览 57提问于2019-09-05得票数 1
我正在VueJS上构建一个小应用程序，其中我有一个api，它提供了在呈现页面时要加载的组件的信息。
我已经将vue-router设置为：
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
export const router = new VueRouter({
routes:
[
{
path: '/',
component
浏览 3提问于2018-08-16得票数 0
回答已采纳
2回答
我有一个相当大的vuex SPA，我只想使用惰性加载在某些路由上加载VueJS模块。
我跟随这篇文章是为了重现这个--
然而，这在vuex中给了我一个错误。
文件夹结构
root
|- store
| |- modules
| | |- auth.js
| | |- module2.js
| |- store.js
|- app.js
auth.js
const state = {
var1: {},
var2: false
}
const mutations = {
'MUTATION_1'(state, obj) {
浏览 14提问于2018-07-20得票数 3
回答已采纳
1回答
减少Vue束大小，提高Vue性能
、、、、
我对vue性能的初始加载时间和大小有很大的问题，下面的图片显示了vue-巧妙地是主要的因素。然而，我没有使用vue-巧妙的包，而是我的vue-透视(数据透视表组件)使用它。
我尝试过在我的路由和查看页面上进行动态加载。例：const PivotTable = () => import('@/components/PivotTable')但是结果还是一样的。
如何防止此包从初始加载。提前谢谢。
浏览 3提问于2021-01-06得票数 1
我正在尝试做以下几件事： import Vue from "vue";
import Router from "vue-router";
import Home from "./views/Home.vue";
import LoadingComponent from '@/components/Loading.vue';
Vue.use(Router);
const router = new Router({
routes: [
{
path: "/",
浏览 9提问于2019-02-01得票数 0
我正在寻找一种可重用的方式来显示一个完整的页面加载器(边栏总是可见的，但是加载程序应该覆盖页面的内容部分)，直到完成所有必要的api获取为止。
我已经将一个父组件LaunchDetails封装在PageLoader组件中
LaunchDetails.vue
<template>
<PageLoader>
<router-link :to="{ name: 'launches' }"> Back to launches </router-link>
<h1>{{ name }}<
浏览 29提问于2021-12-16得票数 8
1回答
当我从一个组件转到另一个组件时，我试图让预加载器显示出来。我使用这个。我创建文件loader.js并在其中写入：
import Vue from 'vue';
import Loading from 'vue-loading-overlay';
import 'vue-loading-overlay/dist/vue-loading.css';
Vue.use(Loading);
let loader = Vue.$loading.show({
loader: 'dots',
color: '#5D00
浏览 0提问于2019-06-28得票数 2
我已经得到了Laravel Mix的全新安装，我正在尝试在项目中设置延迟加载组件。我已经用babel插件‘语法-动态-导入’进行了正确的设置，所以app.js中的import语句可以正常工作。当我尝试将延迟加载的组件与vue-router一起使用时，就会出现这个问题。
我的app.js文件如下所示：
require('./bootstrap');
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const EC = () =>
浏览 2提问于2018-08-30得票数 0
如果有人告诉我如何在Vue.js中将一些模板导入到route.js中，我将非常感激：)
这是我的html
<head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app
浏览 0提问于2019-04-30得票数 1
2回答
下面是使用Vue官方路由器的延迟加载实现
src/router/index.js
import Vue from "vue";
import VueRouter from "vue-router";
const Foo = () => import("@/components/Test2");
const Bar = () => import("@/components/Test");
Vue.use(VueRouter);
export default new VueRouter({
mode: "
浏览 2提问于2019-01-22得票数 6
回答已采纳
1回答
在Vue3中需要一个具有动态路由的动态组件。我想呈现来自router.ts的params (路径名为id)的组件。
正如您在router.ts中看到的，我有一个名为id的动态参数。我希望以相同的名称呈现相同的组件。
例如:如果输入了，它应该呈现我已经在项目中创建的FirstPage组件。
当输入时，它应该呈现SecondPage组件，等等。
我的问题是如何做到这一点--我尝试过多种方法，其中之一就是：
{
path: "/forms/form/:id",
component: () => import("../pages/" + loc
浏览 4提问于2022-07-13得票数 0
回答已采纳
试图添加一个语言前缀到url与vue-路由器，但它重新使用一个错误的消息：Uncaught Error: Missing required param "locale" I是试图添加的路由，支持语言前缀如en，de，nl，fr等.
我确实看到，我使用的是儿童路线，实际上我不需要，我猜……！
example.com/en/users
example.com/nl/users
example.com/fr/users
routes.js
const routes = [
{
path: "/",
redirect: '
浏览 2提问于2021-05-31得票数 1
1回答
我们正在尝试构建一个“可插件”的Java，它在客户端使用vue.js。
一般描述
假设我们希望在生产中获得以下服务器端应用程序简化的体系结构，而没有使用NodeJs (以及使用Java和Osgi，但在这里并不重要，在我看来，可能是PHP、.Net或摇摆不定)：
一个主要的etc应用程序，它公开了vuejs2、路由器和一些通用依赖项(引导、jQuery等)。在客户端，
许多webapp插件都公开了，其中包括:附加和/或可选的vue.js组件和第三方依赖项。
我们想要的
webapp做的工作是在服务器端检查可用的webapp插件，然后在索引文件中公开适当的JS文件。例如：
ap
浏览 1提问于2017-07-08得票数 2
2回答
VueJs:安装组件失败
、、、
我使用的是Vue路由器，而不是加载组件，而是抛出这个模糊的错误：
Failed to mount component: template or render function not defined.
found in
---> <Anonymous>
<Root>
这里是我的入口点(app.js) (注意，我使用多个条目与CommonsChunksPlugin结合使用)：
import Vue from 'vue'
import '../../../assets/css/main.css'
import App
浏览 1提问于2017-08-30得票数 7
我认为这个问题源于父模板在带有Vue Router 4的Vue.js 3中有多个子模板。在这两个包的先前版本中，我从未遇到过这个问题。 我有一个简单的App.vue文件： router-link to="/information"链接工作正常。它只是加载其中没有其他组件的视图。 另一个router-link :to="{ path：'/create'，name：'PostCreate'}"在重复尝试加载组件约50次后失败，并在控制台中记录以下内容： vuerouter.js Information.vue和PostCreate.
浏览 1995提问于2021-02-27得票数 4
回答已采纳
1回答
我对web开发相当陌生，我想知道是否有一种方法可以使用vue-router用自己的样式表和javascripts路由静态网页。
假设我有一个名为staticWebPage的目录，其中包含：
index.html文件
包含.js文件的javascripts目录
以及包含.css文件的样式表目录。
现在，我想将/mystaticwebpage映射到这个index.html文件，以便它显示特定的静态网页。
我想做这样的事情：
import VueRouter from 'vue-router'
import AComponent from './compo
浏览 3提问于2017-05-30得票数 3
2回答
我正在给一次尝试，到目前为止我很喜欢它，因为它比角度简单得多。我目前在我的单页应用程序中使用和，它连接到后端的API。我认为我的工作主要是使用主app.js，它加载vue路由器和vue-资源，以及每个路由的几个独立组件。
下面是我的问题:当使用异步AJAX调用获取数据时，如何使用将全局数据传递给子组件？例如，用户列表可以用于几乎任何子组件，因此我希望主app.js获取用户列表，然后允许每个子组件访问该用户列表。我想让app.js获取用户列表的原因是，我只需要为整个应用程序调用一个AJAX。还有什么我该考虑的吗？
当我现在在子组件中使用props时，我只得到users变量被初始化为空数组，而不是
浏览 2提问于2015-09-04得票数 3
回答已采纳
4回答
我对vue和laravel还不熟悉。我正在尝试导入我的组件，但是我得到了这个错误。
未找到.//js/router.js模块中的错误:错误:无法解析
router.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import HomepageComponent from './pages/frontend/HomepageComponent'
Vue.use(VueRouter)
const routes = [
{
path: '/',
浏览 12提问于2020-05-11得票数 1
回答已采纳
3回答
我使用的是VueJS路由器，但是路由器没有加载组件。
我有About.vue和Contact.vue只需要测试标签-如下所示：
<template>
<div>
<h1>Contact page. Welcome baby!</h1>
</div>
</template>
这里是App.vue，有三个路由器链接和路由器视图.
<template>
<div>
<h1>Routing</h1>
<router-link to=&#
浏览 1提问于2017-09-01得票数 5
回答已采纳
我使用的是Nuxt和Element。我在plugins文件夹中动态导入了元素UI插件。
export default () => {
Vue.component("ElForm", () => import("element-ui/lib/form"));
Vue.component("ElFormItem", () => import("element-ui/lib/form-item"));
Vue.component("ElInput", () => import("
浏览 8提问于2022-01-12得票数 0
回答已采纳
5回答
Vue js预取组件
、、、
最近，我学习了延迟加载组件，并开始使用它。现在，我正在尝试预取延迟加载的组件以及vue-router路由。但是，使用chrome，我发现只有当我们实际导航到延迟加载的路由时(在vue路由器路由的情况下)或者当v-if计算为true并呈现组件时(如果是延迟加载的组件)，才会加载延迟加载的块。
我还尝试过在路由器中使用webpackPrefetch: true魔术字符串以及组件导入语句，但这样做似乎没有任何区别。
项目结构：
主细节布局
路由器配置：
import Vue from "vue";
import Router from "vue-router";
Vu
浏览 8提问于2020-08-21得票数 7
1回答
我有一个包含几个页面组件的文件夹，如下所示：
- pages
+ page-A
+ page-a.vue
+ page-B
+ page-b.vue
据我所知，如果我们想要将page-a.vue和page-b.vue呈现为它自己的页面，我们必须使用vue-router，其描述如下：
import Vue from 'vue';
import Router from 'vue-router';
import PageA from '@/pages/page-A/page-a';
import P
浏览 0提问于2018-01-20得票数 0
<template>
<div>
<top-loader ref="topLoader"></top-loader>
<div class="container">
<router-view></router-view>
</div>
</div>
</template>
<script>
import Toploader from '
浏览 2提问于2018-11-11得票数 0
3回答
如何在路由中动态加载组件
、、、
我是一个Vue新手，我正在尝试使用vue路由器和动态加载组件，而不使用任何额外的库(所以没有webpack或类似的)。
我已经创建了一个索引页并设置了一个路由器。当我第一次加载页面时，我可以看到subpage.js没有被加载，当我单击<router-link>时，我可以看到subpage.js文件已经加载。但是，URL不会更改，组件也不会出现。
到目前为止，这就是我所拥有的：
index.html
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.j
浏览 2提问于2018-09-29得票数 2
当尝试将Vue.js与vue-资源和vue-路由器一起使用时，会显示一个错误：
ReferenceError:初始化前无法访问词法声明“`vm”
就我跟踪的错误而言，它只在页面加载了初始路由时才出现，例如test.com/ #/file ( error )和test.com/(无错误)。如果将requestDirectory()的所有代码替换为next()，则不会显示错误。因此，它似乎继承了代码结构。有什么想法吗？
const routerComponents = {
home: { template: '<p>Home ...</p>&
浏览 5提问于2017-01-12得票数 1
回答已采纳
我只是不明白，在list.vue中，我只触发一个异步改变updated钩子中state.list的list操作。items是一个只依赖于state.list的计算属性。为什么这会导致无限的更新事件？
我发现，如果我将updated钩子中的代码移动到watch选项中，如下所示：
watch: {
'$route': function () {
this.$store.dispatch('list')
},
},
无限的问题就会消失。但这将在每次监视updated更改时触发两次$route钩子，我也不知道为什么。
来了。相关代码
// main.j
浏览 1提问于2017-07-11得票数 0
回答已采纳
1回答
使用Vue 3嵌套路由器，我设置了如下结构：
root1
└ Parent Route (router-view with Render Function)
└ Child Route [FAIL TO RENDER]
root2
└ Parent Route (router-view with Template)
└ Child Route [FINE]
在我看来，这两种方式是可以互换的，但实际表现却是不同的。有什么问题吗？
此外，是
render() { return Vue.h("router-view") }
&
template
浏览 5提问于2020-11-18得票数 1
回答已采纳
1回答
我试图通过ajax请求创建一个带有Vue路由器的菜单树，但是$mount函数是在ajax请求响应之前调用的，因此Vue实例中的路由器始终为null。这里有什么好的解决办法吗？
下面是我的代码(index.js)：
import Vue from 'vue';
import Element from 'element-ui';
import entry from './App.vue';
import VueRouter from 'vue-router';
import VueResource from 'vue-reso
浏览 1提问于2016-11-02得票数 0
我正在学习关于vuejs的方法，并决定创建一个类似eshop的练习网页。
我在一个api调用中获取我的所有数据，并希望能够从我的所有路由器视图中访问它们，这样我就可以将类别名称与其余的数据配对。
目前我所做的是获取new Vue created上的所有数据，然后从$root的所有路由器视图中相应地访问它。
除了直接导航到url或刷新页面外，这非常有用。
据我所见，category对象似乎还没有加载并返回null
这显然是个时间问题，但我还没有找到需要去的地方.
beforeRouteEnter是我解决这个问题的最新尝试。
我的路线
const routes = [
{ path
浏览 0提问于2018-02-18得票数 0
回答已采纳
1回答
vuejs中的模块化路由
、、、、
我正在建立一个简单的网站，其中我有一个分类网页的路线。我希望使用单个动态路由在页面之间移动。我使用vue-router进行此项目，路由需要加载不同的组件
这些是网站所需的路径
例如：'/shop/men‘，'/shop/women'，’/shop/women‘
这是我的路由器的index.js文件，其中性别附加在最后决定加载哪个组件，我面临的问题是如何处理这个问题，并根据它加载不同的组件
router-> index.js:
{
name: 'shop',
path: '/shop/:gender'
浏览 0提问于2018-02-08得票数 0
因此，我对vue.js非常陌生，这可能是我犯的同样愚蠢的错误，但唉，谷歌今天似乎不是我的朋友，因为我已经搜索了两个多小时，什么也没有发现。
我的问题发生在试图加载组件时。这个组件嵌套在其他组件中，路由器应该加载它。我有其他组件以这种方式加载(使用<router-view></router-view>和路由器)，没有任何问题。这个组件唯一的不同之处在于它在根下嵌套了3个级别，而在我所有的其他组件中，我所做的最深的是两个层次。
当我试图加载这个组件时，我会收到2个警告和一个错误：
警告1 :
[vue-router] Failed to resolve async comp
浏览 0提问于2018-05-07得票数 7
回答已采纳
我已经在vue-router 4中设置了一个route，它应该根据用户是否登录来动态加载component。我是这样做的(也许还有更好的方法？)： import Personal from '../views/Personal.vue';
import Public from '../views/Public.vue';
routes: [
{
path: '/',
component: async () => {
const isLoggedIn = await authe
浏览 79提问于2021-10-02得票数 0
回答已采纳
我是新来的Vue打字本。我试图创建全局组件，但是我得到了警告，而且模板上没有加载组件。这就是我试图创建全局组件的方式。
App.vue
import { createApp } from "vue"
import App from "./App.vue"
import "./registerServiceWorker"
import "./globalComponents"
import router from "./router"
import store from "./store"
crea
浏览 2提问于2021-06-05得票数 4
回答已采纳
2回答
页路由器的vue旋转器
、、、
我使用，我有一个。
主页是Home.vue，在其他组件上有链接：
<router-link to="/">Home</router-link>
<router-link to="/helloworld">Hello World</router-link>
<router-link to="/bigimg">Big Img</router-link>
main.js：
import Vue from "vue";
import App from "
浏览 0提问于2018-09-29得票数 1
我的main.js如下
import Vue from 'vue'
import App from './App'
import vueResource from 'vue-resource'
import VueRouter from 'vue-router'
import Registration from './components/Registration.vue'
import Login from './components/Login.vue'
Vue.config.produ
浏览 0提问于2017-05-05得票数 0
1回答
我想知道如何检查异步组件何时加载。
通常，我会像这样加载组件：
Vue.component(
'booking-overlay',
() => import('@/components/BookingOverlayAsync.vue')
);
使用这样的东西是行不通的：
Vue.component(
'booking-overlay',
() => import('@/components/BookingOverlayAsync.vue').then(() => {
浏览 0提问于2018-10-19得票数 2
回答已采纳
我将所有数据加载到根Vue实例中，并试图在路由器中访问它们。
如何访问路由器中根实例中的数据？我在网上找到的所有this.a.app或this.app答案都不是解决方案。
Router.js:
import Vue from 'vue'
import Router from 'vue-router'
import Login from '../components/login'
import Container from '../components/container'
Vue.use(Router)
export defau
浏览 0提问于2018-03-01得票数 0
回答已采纳
1回答
我使用Laravel5.3与Vue 2和Vue路由器，但我的组件是不可见的。Foo和Bar正在工作。
这是我的App.js
/**
* Load JavaScript dependencies
*/
require('./bootstrap');
/**
* Import Vue and VueRouter
*/
import Vue from 'vue'
import VueRouter from 'vue-router'
/**
* Import Components
*/
import UsersIndex from &#
浏览 0提问于2016-11-07得票数 0
我最近开始使用vue，我已经设法创建了一些简单的页面，但我注意到，一旦加载组件没有缓存，因此，例如在下面的链接(这是我正在做的) youtube视频需要时间加载，如果我点击任何其他链接，并返回到视频，他们再次加载。
可以用来缓存组件吗？最好是全部，而不是1乘1。
这是我的vue：
import VueRouter from 'vue-router';
import Create from '../components/homepage/create.vue';
import How from '../components/homepage/how.vue
浏览 1提问于2017-11-30得票数 5
我正试图围绕Vue --特别是，将数据从Vue实例传递给组件。我还使用了Vue-路由器和Axios，这是一个非常简单的项目，只有一个JavaScript文件。
index.html的重要部分如下所示：
<div id="app">
<!-- Navigation -->
<ul>
<router-link tag="li" to="/" exact><a>Home</a></router-link>
<rou
浏览 2提问于2017-04-16得票数 1
我有一个执行简单插入的vue应用程序，我正在尝试使用vue路由器重定向到不同的页面，例如，当我加载/postComponent和/userComponent时，它们将位于不同的页面上，而不是在加载本地主机时全部在一个页面中。 app.js <template>
<div id="app">
<router-link to="/postcomponent">post</router-link>
<router-link to="/usercomponent">use
浏览 67提问于2020-01-24得票数 0
回答已采纳
1回答
我一直在尝试简单地加载模块，比如Jquery和@tensorflow/tfjs，但是我不能让它工作。我已经使用npm安装了这两个工具。
我已经创建了@vue3/cli项目，一切正常，直到我尝试导入这两个模块。
我的main.js文件是这样的-
import {
Vue
} from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './assets/index.css
浏览 2提问于2021-05-27得票数 0
1回答
我想在点击“下一步”按钮后加载一个vue组件。这个项目是laravel + vue。如果我将组件直接放入laravel (你可以在下面看到它们)，组件就会加载，但如果我试图从组件中打开组件，它就不起作用了。我没有得到任何错误，它只是保持相同的组件。地址栏中的路由将更改为它应该更改的路由...我的意思是它真的很棒。 app.js： require('./bootstrap');
window.Vue = require('vue').default;
import Vue from 'vue';
import VueRouter from &
浏览 94提问于2021-11-19得票数 0
回答已采纳
2回答
我试图创建一个只使用Vue 3组合API的全局存储。
到目前为止，我一直在做实验，我读了很多关于如何使用复合API的文章，但是我知道我不知道如何使用provide和inject。
我只知道provide将拥有传递给子组件的所有数据，所以我认为应该将存储导入到main.ts中。代码是这样的：
这是存储区(src/ store /index.ts)：
import { reactive, readonly } from "vue";
const state = reactive({
fnacResults: [],
interResults: [],
});
expor
浏览 6提问于2020-10-26得票数 5
回答已采纳
1回答
我在玩基本原理，当我点击navigation中的路由链接时，它会重新加载页面，而不是加载页面内容，而是呈现正确的URL。我把这个项目上传到git。
这是入口点src -> App.vue
<template>
<navigation></navigation>
</template>
<script lang="ts">
import Navigation from "@/views/navigation/Navigation.vue";
export default({
name:
浏览 1提问于2018-12-22得票数 0
回答已采纳
5回答
我使用了laravel5.4和vue 2，我想使用一个按钮作为异步加载组件。我的Vue js组件是分开的: example.vue和test.vue，我将它们作为html标记加载。
这是我的app.js：
import './bootstrap';
import example from './components/Example.vue';
Vue.component('example', example);
const app = new Vue({
el: '#app'
});
这里是显示组件的地方。
<H
浏览 8提问于2017-04-19得票数 9
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
