Vue路由懒加载（resolve）,嵌套路由 3

懒加载：又叫延时加载，即在需要的时候进行加载，随用即载

使用懒加载的原因：

像vue这种（spy）单页面应用，如果没有使用到懒加载，webpack打包的文件过大，造成进入首页时，加载的资源过多，时间过长，即使做了loading也不利于用户体验，而运用懒加载可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载事件，简单来说就是进入首页不用一次加载过多资源造成时间过长

https://blog.csdn.net/weixin_42331327/article/details/108463527 Vue3.0 路由的配置

Vue3路由(跟vue2差别不大) 1.安装vue-router 最新支持vue3 router的版本eg: “vue-router”: “^4.0.0-beta.13”

由于 vue-cli 没有直接支持创建 Vue3.0 项目，所以需要通过插件升级，我们输入指令：

vue add vue-next

import { createRouter,createWebHashHistory } from 'vue-router'const HelloWorld = () => import("@/components/HelloWorld")
const routes = [{path: '/',name: 'HelloWorld',component:HelloWorld},
]
const router = createRouter({//负责管理历史的属性，有三种历史可选//hash,history,memoryhistory: createWebHashHistory(),routes
});export default router//代码中编程式导航也是通过createRouter获取router的,route也一样main.js引入
import router from './router/index' //引入
app.use(router)
app.mount('#app')或者createApp(App).use(router).mount('#app') 或者

懒加载的使用方法：

ES 提出的import方法，（------最常用------）方法如下：const HelloWorld = （）=>import('需要加载的模块地址')

（不加 { } ，表示直接return）

path:'/study', path:'/小写’

import Vue from 'vue'
import Router from 'vue-router'Vue.use(Router)const HelloWorld = () => import("@/components/HelloWorld")
const HelloWorld = () => import('../pages/HelloWorld/HelloWorld') //推荐这种 简洁直观
export default new Router({routes: [{path: '/',name: 'HelloWorld',component:HelloWorld},{path: '/index',name: 'Index',component:Index}]
})

vue异步组件实现懒加载方法如下：component：resolve=>(require(['需要加载的路由的地址'])，resolve)

index.js

import Vue from 'vue';
import Router from 'vue-router';
import routers from './router';
const router = new Router({routes: routers
})export default router//代码中编程式导航也是通过createRouter获取router的,route也一样

嵌套路由

注意：父路由不需要设置name属性

export default new Router({routes: [{path: "/",name: "Index",meta: {title: "首页"},component: Index,alias: "/home"},{path: "/Aboutus",component: () => import("@/pages/Aboutus/Aboutus"),meta: {title: "关于我们"},redirect: "/Aboutus/Work", //重定向 到默认子路由children: [{path: "Study", //默认子路由 子页1 //以“/”开头的嵌套路径会被当作根路径，所以子路由上不用加“/”;在生成路由时，主路由上的path会被自动添加到子路由之前，所以子路由上的path不用在重新声明主路由上的path了。name: "Study",component: Study},{path: "Work",name: "Work",component: () => import("@/pages/Aboutus/Work"),meta: {title: "work"}},{path: "Hobby",name: "Hobby",component: Hobby}]}]
})再嵌套：
{path: "/Aboutus",component: () => import("@/pages/Aboutus/Aboutus"),meta: {title: "关于我们"},redirect: "/Aboutus/Work", //重定向 到默认子路由children: [{path: "Study", //默认子路由 子页1 //以“/”开头的嵌套路径会被当作根路径，所以子路由上不用加“/”;在生成路由时，主路由上的path会被自动添加到子路由之前，所以子路由上的path不用在重新声明主路由上的path了。name: "Study",component: Study},{path: "Work",//name: "Work",component: () => import("@/pages/Aboutus/Work"),redirect: "/Aboutus/Work/One",//重定向 到默认子路由meta: {title: "work"},children: [{path: "One",name: "One",component: () => import("@/pages/Aboutus/children/one"),meta: {title: "One"}}]},]}别忘记：
<transition mode="out-in"><router-view />
</transition>

router.js:适用后台管理（头部底部固定左侧菜单右侧内容点击）

Vue路由懒加载（resolve）,嵌套路由 3相关推荐

vue路由懒加载resolve方式与import方式
使用路由懒加载是为了更好的用户体验,首屏组件加载的速度快一点,解决了白屏的问题懒加载就是延迟加载或者屎按需加载,在需要的时候进行加载常用的懒加载有两种,vue异步组件和es的import 1.未 ...
Vue 路由懒加载根据根路由合并chunk块
路由懒加载的小技巧一般来说当我们的项目越来越大的时候,我们打包的文件也越来越大.这时候我们的首屏加载就会很慢.因此我们会使用到路由的懒加载机制来对我们的模块进行划分 export default n ...
Vue3（撩课学院）笔记07-vueRouter路由，创建路由，路由重定向，路由跳转，动态路由，路由懒加载，路由嵌套，路由参数穿传递的两种形式，通过事件来跳转路由
1.vueRouter路由的两种模式哈希模式:以#号分割,前端路由一般用hash模式比较多,可以兼容ie8以上,井号后面不发起请求历史模式:putstate()和replaceState()方法入 ...
Vue—核心概念—异步组件和路由懒加载
原文地址:Vue 异步组件&路由懒加载目录异步组件异步组件介绍异步组件声明高级异步组件路由懒加载路由懒加载介绍路由懒加载方法把组件按组分块异步组件异步组件介绍在开发大型 ...
vue路由懒加载_优化vue项目的首屏加载速度
最近使用vue-cli3构建了一个小型的博客系统,完工之后,build打包出来发现一个chunk-vendors包就有1.1m,部署上去之后,访问的时候,首屏加载非常慢.居然需要21s,体验极差. 这 ...
vue“路由懒加载” 技术，让网页快速加载（优化篇）
(含代码示例.截图演示)让中大型vue项目,按需加载文件,让网页快速渲染! 官方文档:路与懒加载所谓的路由懒加载: 代码示例 · 对比: 1. 没有优化的代码(截图1 · 省略) import Vu ...
Vue 路由懒加载
路由和组件的常用两种懒加载方式: 1.vue异步组件实现路由懒加载 component:resolve=>(['需要加载的路由的地址',resolve]) 2.es提出的import(推荐使用这 ...
vue中的路由懒加载
文章目录路由懒加载 vue异步组件 ES import 常用路由懒加载懒加载本质是延迟加载或按需加载,即在需要的时候的时候进行加载. 首页不用设置懒加载,一个页面加载过后再次访问不会重复加载. ...
vue路由懒加载的两种方式
1.当一个vue项目很大的时候,对于一些"暂时"用不到的组件,我们可以不进行加载,等到用到次组件时再加载.这样可以优化spa应用首次加载白屏情况,也给用户更好的体验.这样就是vue ...
Vue 路由懒加载——介绍以及遇到的问题
使用路由懒加载的原因当打包构建应用时,JavaScript 包会变得非常大,影响页面加载.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了. ...

Vue路由懒加载（resolve）,嵌套路由 3

Vue路由懒加载（resolve）,嵌套路由 3相关推荐

最新文章

热门文章