路由的懒加载

最新推荐文章于 2024-03-18 02:40:15 发布

.慢慢亦漫漫

最新推荐文章于 2024-03-18 02:40:15 发布

阅读量1.3k

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_43183219/article/details/125301482

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

什么是路由懒加载

网页默认的是一打开就会去加载所有的页面，路由懒加载就是按需加载，只加载我们点击的那个模块。

路由懒加载的原理

将路由相关的组件改成异步组件的写法，当函数调用的时候再去加载组件的内容。

路由懒加载代码实现

普通的路由配置

import Home from '../pages/Home/Home.vue'
import TableTop from '../pages/TableTop/TableTop.vue'
import Community from '../pages/Community/Community.vue'
import Car from '../pages/Car/Car.vue'
import Key from '../pages/Keylianxi/Key.vue'
export default [
    {
        path: '/',
        component: () => import('../pages/Login/Login.vue'),
        meta: { title: '小区管理', isAuth: false }
    },
    {
        path: '/login',
        // 异步加载
        component: () => import('../pages/Login/Login.vue'),
        meta: { title: '登录', isAuth: false }

    },
    {
        path: '/home',
        name: 'myhome',
        component: Home,
        meta: { title: '首页', isAuth: false },
        children: [
            {
                path: 'tabletop', components: { content: TableTop },
                meta: { title: '桌面', isAuth: false },
            },
            {
                path: 'community', components: { content: Community },
                meta: { title: '小区管理', isAuth: false }
            },
            {
                path: 'key', components: { content: Key },
                meta: { title: '桌面', isAuth: false },
              
            },
            {
                path: 'car/',
                name: 'car',
                components: { content: Car },
                meta: { title: '车位管理', isAuth: false }
            },

        ]
    },


]

路由懒加载的路由配置

export let myroutes = [
    { path: '/', component: () => import('../pages/Login/Login.vue') },
    {
        path: '/login',
        // redirect:{name:'myhome'},
        component: () => import('../pages/Login/Login.vue')
    },
    {
        path: '/home',// "/home/:name"->"/home/asfda" 
        name: 'myhome',
        meta: { title: '首页' },
        component: () => import('../pages/Home/Home.vue'), //{default:Home}
        children: [
            {
                path: "zhuomian",
                name: 'zhuomian',

                components: {
                    content: () => import('../pages/ZhuoMian/ZhuoMian.vue'),//"视图的名字"：组件
                },
                meta: {
                    keepAlive: true,
                    title: '桌面',
                    isAuth: false
                },
                beforeEnter: (to, from) => {
                    console.log('beforeEnter')

                    return true
                },
            },
            {
                path: "xiaoqu",

                components: {
                    content: () => import('../pages/XiaoQu/XiaoQu.vue')


                },
                meta: {
                    keepAlive: false,
                    title: '小区管理',
                    isAuth: false
                }

            },
            {
                path: "chewei",
                name: 'chewei',
                meta: { title: '车位管理', isAuth: false, keepAlive: true },
                components: {
                    content: () => import('../pages/Car/Car.vue')
                },
                
            },
            {
                path: "/home/chewei/get",
                name: 'getCar',
                components: {
                    content:()=> import('../pages/Car/ShowCar.vue')
                }
            },
            {
                path: "key",
                name: 'key',
                meta: { title: 'key值得使用', isAuth: false, keepAlive: true },
                components: {
                    content: () => import('../pages/keylianxi/key.vue')
                },
                
            }
        ]
    }
]