Breaking News: Grepper is joining You.com. Read the official announcement!

Lazy Loading Routes vue

putsan answered on January 4, 2021 Popularity 10/10 Helpfulness 4/10

answer Lazy Loading Routes vue

related lazy loading in vue js

Lazy Loading Routes vue

Comment

routes: [
    {
      path: '/vue_films-app',
      name: 'Movies',
      component: Movies,
    },
    {
      path: '/vue_films-app/details/:id',
      name: 'Details',
      component: () => import('../views/Details.vue'),
    },
  ],

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: Grepper

Tags: javascript lazy-loading routes

Link to this answer
Share Copy Link

Contributed on Jan 04 2021

putsan

0 Answers Avg Quality 2/10

Closely Related Answers

lazy loading in vue js

Comment

import { createRouter, createWebHistory } from 'vue-router';
import { defineAsyncComponent } from 'vue';
import LoadingComponent from '@/pages/Loadingpage.vue';

const LoadingAsyncComponent = (component) => defineAsyncComponent({
  loader: () => component,
  loadingComponent: LoadingComponent,
});

const HomeView = LoadingAsyncComponent(import('@/pages/HomePage.vue'));
const WeddingPhotoBooth = LoadingAsyncComponent(import('@/pages/WeddingPhotoBooth.vue'));
const VideoBooth = LoadingAsyncComponent(import('@/pages/VideoBooth.vue'));
const BlogsPages = LoadingAsyncComponent(import('@/pages/BlogsPages.vue'));
const BlogPost = LoadingAsyncComponent(import('@/pages/BlogPost.vue'));
const ContactForm = LoadingAsyncComponent(import('@/pages/ContactForm.vue'));
const BookBooth = LoadingAsyncComponent(import('@/pages/BookBoothWithUs.vue'));
const Gallery = LoadingAsyncComponent(import('@/pages/Gallery.vue'));
const Detail = LoadingAsyncComponent(import('@/pages/Detail.vue'));
const PartiesPhotoBooth = LoadingAsyncComponent(import('@/pages/PartiesPhotoBooth.vue'));
const CorporatePhotoBooth = LoadingAsyncComponent(import('@/pages/CorporatePhotoBooth.vue'));
const BrandActivationPhotoBooth = LoadingAsyncComponent(import('@/pages/BrandActivationPhotoBooth.vue'));

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    { path: '/', name: 'Home', component: HomeView },
    { path: '/booth/photo-booth', name: 'Photo-booth', component: WeddingPhotoBooth },
    { path: '/booth/video-booth', name: 'videoBooth', component: VideoBooth },
    { path: '/blogs', name: 'blogs', component: BlogsPages },
    { path: '/blogs-post/:id', name: 'blogsPost', component: BlogPost, meta: { breadcrumb: "Blog Post" }, props: true },
    { path: '/contact', name: 'contact', component: ContactForm },
    { path: '/book-booth', name: 'BookBooth', component: BookBooth },
    { path: '/gallery', name: 'Gallery', component: Gallery },
    { path: '/detail', name: 'Detail', component: Detail },
    { path: '/parties', name: 'Parties', component: PartiesPhotoBooth },
    { path: '/corporate', name: 'Corporate', component: CorporatePhotoBooth },
    { path: '/brand-activations', name: 'BrandActivation', component: BrandActivationPhotoBooth },
    { path: '/:pathMatch(.*)*', component: HomeView },
  ],
});

export default router;

Popularity 7/10 Helpfulness 3/10 Language javascript

Source: chat.openai.com

Tags: javascript lazy-loading lazy-loa

Link to this answer
Share Copy Link

Contributed on Dec 13 2023

Mohammad Usman

0 Answers Avg Quality 2/10

Lazy Loading Routes vue

Contents

More Related Answers

Lazy Loading Routes vue

Closely Related Answers

lazy loading in vue js

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.