黑马】后台管理-路由懒加载

文章介绍了如何通过路由懒加载来优化JavaScript包的大小,提高页面加载效率。通过使用@babel/plugin-syntax-dynamic-import插件,然后在路由定义中采用按需加载的方式,如`import(/*webpackChunkName:group-foo*/./Foo.vue)`,将不同路由的组件打包成不同的代码块,只在访问特定路由时加载对应的组件。这种方式允许将相关组件组合在同一组,通过相同的分组名称实现合并打包,如login_home_welcome,以控制加载的资源数量。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

当打包构建项目时, JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。

具体需要 3 步:

① 安装 @babel/plugin-syntax-dynamic-import 包。

② 在 babel.config.js 配置文件中声明该插件。

③ 将路由改为按需加载的形式,示例代码如下:

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-boo" */ './Baz.vue')

关于路由懒加载的详细文档,可参考如下链接:

https://router.vuejs.org/zh/guide/advanced/lazy-loading.html

foo和bar的分组名称都叫做group-foo

这两个文件会同时被打包到同一个js文件中,请求foo的时候,会同时把bar请求过来。

在安装好依赖之后,把之前的路由全部改装成懒加载的形式

const+组件的名称,然后是组件的分组名称和存放路径,

希望把哪几个放在一个js文件中,就起相同的分组名称

分组名称通常命名为组件的名称合集

// import Login from '../components/login.vue'
const Login = () => import(/* webpackChunkName: "login_home_welcome" */ '../components/login.vue')
// import Home from '../components/home.vue'
const Home = () => import(/* webpackChunkName: "login_home_welcome" */ '../components/home.vue')
// import Welcome from '../components/welcome.vue'
const WelCome = () => import(/* webpackChunkName: "login_home_welcome" */ '../components/welcome.vue')

// import Users from '../components/user/Users.vue'
const  Users  = () => import(/* webpackChunkName: "Users_Rights_Roles" */ '../components/user/Users.vue')
// import Rights from '../components/power/Rights.vue'
const   Rights  = () => import(/* webpackChunkName: "Users_Rights_Roles" */ '../components/power/Rights.vue')
// import Roles from '../components/power/Roles.vue'
const Roles = () => import(/* webpackChunkName: "Users_Rights_Roles" */ '../components/power/Roles.vue')


// import Cate from '../components/goods/Cate.vue'
const  Cate = () => import(/* webpackChunkName: "Cate_Params" */ '../components/goods/Cate.vue')
// import Params from '../components/goods/Params.vue'
const Params = () => import(/* webpackChunkName: "Cate_Params" */ '../components/goods/Params.vue')

// import GoodsList from '../components/goods/List.vue'
const GoodsList = () => import(/* webpackChunkName: "GoodsList_Add" */ '../components/goods/List.vue')
// import Add from '../components/goods/add.vue'
const Add = () => import(/* webpackChunkName: "GoodsList_Add" */ '../components/goods/add.vue')

// import Order from '../components/order/Order.vue'
const Order = () => import(/* webpackChunkName: "Order_Report" */ '../components/order/Order.vue')
// import Report from '../components/report/Report.vue'
const Report = () => import(/* webpackChunkName: "Order_Report" */ '../components/report/Report.vue')

### 黑马后台管理系统的路由配置实现方式 #### 1. 路由基础设置 在 `router/index.js` 文件中定义了基本的路由规则,通过引入 Vue Router 并注册路径与组件之间的映射关系完成初始化。以下是具体的代码示例: ```javascript // router/index.js import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter); import Login from '@/components/MyLogin.vue'; // 登录页组件 const router = new VueRouter({ mode: 'history', // 使用HTML5 History模式去掉# routes: [ { path: '/', redirect: '/login' // 默认重定向至登录页面 }, { path: '/login', component: Login // 配置登录页面对应的组件 } ] }); export default router; ``` 此部分实现了默认跳转逻辑以及 `/login` 的具体指向[^1]。 #### 2. 导航守卫机制 为了确保某些功能模块仅能在用户成功认证之后访问,在项目中设置了全局前置守卫 (Global Before Guard),它会在每次路由切换前执行验证流程。如果检测到未登录状态,则强制重新导向回登录界面;反之允许继续浏览目标地址。 ```javascript // 添加导航守卫 router.beforeEach((to, from, next) => { if(to.path === '/login') return next(); // 如果前往的是登录页,则放行 const tokenStr = window.sessionStorage.getItem('token'); // 获取存储中的令牌信息 if(!tokenStr){ next('/login'); // 若无有效凭证则转向登录入口 }else{ next(); // 否则正常通行 } }); ``` 上述片段展示了如何利用 `beforeEach` 方法拦截请求并判断当前用户的授权状况[^2]。 #### 3. 异步确认对话框处理 对于一些交互行为比如删除操作,采用 Element UI 提供的消息提示插件 `$confirm()` 来询问最终决定,并借助 async-await 结构简化异步编程过程。下面是一个关于移除指定 ID 用户的例子说明: ```javascript removeUserById(id){ this.$confirm('此操作将永久删除该用户, 是否继续?', '提示',{ confirmButtonText:'确定', cancelButtonText:'取消', type:'warning' }).then(async () =>{ // 当点击“确定”按钮时触发.then分支 try{ await deleteUserApi(id); // 假设存在这样一个API用于实际销毁记录 this.getUserList(); // 刷新列表数据 this.$message.success('删除成功'); }catch(error){ console.error(error); this.$message.error('删除失败'); } }).catch(() =>{ this.$message.info('已取消删除'); }); } ``` 这里体现了基于 Promise 对象的操作链路设计思路,同时结合错误捕捉增强用户体验反馈效果[^3]。 ---
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值