路由懒加载问题和linkActiveClass属性

本文探讨了Vue应用中的路由懒加载技术,强调其在提高加载速度和优化用户体验方面的重要性。通过实例展示了如何配置路由进行懒加载,并解释了`linkActiveClass`属性在解决链接激活状态问题上的作用,提醒开发者注意相关CSS样式的设置,以实现理想的页面效果。

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

1.路由懒加载问题 :就是需要的时候调用
好处:就是在需要运行的时候才调用,加快加载速度,提高用户体验
具体来说:vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会出啊先长时间的白屏,即使做了loading也是不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时
简单说 :进入首页不用一次加载过多资源造成用时长

const routes = [

    //前台
    {
        path: "/",
        redirect: "/index",
        component: Laytout2,
        children: [
            { path: "index", name: "index", component: Index },
            { path: "send", name: "send", component: Send },
            { path: "detail", name: "detail", component: Detail },//非路由懒加载
            { path: "about", name: "about", component: () => import('@/portal/other/About.vue') },   //路由懒加载
            { path: "answer", name: "answer", component: () => import('@/portal/other/Answer.vue') },
            { path: "comunity", name: "comunity", component: () => import('@/portal/other/Comunity.vue') },          
            { path: "school", name: "school", component: () => import('@/portal/other/School.vue') },
        ]
    },
]

2.vue中的router-link linkActiveClass属性

  1)在路由中配置linkActiveClass属性,既可以解决标签全被选中问题

const router = new VueRouter({
    routes,
    mode: 'history', //去掉路由地址中的hash地址
    linkActiveClass: 'active', //让所有的link显示
})

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HolleWorld',
      component: HolleWorld
    }
  ],
   mode: "history", //hash       去掉路由地址中#
  linkActiveClass: 'active'   // active为路由激活时动态添加的类,类名可以自定义   
})

2)在页面上调用的时候容易忽视一个问题    此处不能在html标签加class="active"

 <li v-for="(item, index) in menuList" :key="index">
            <router-link :to="item.linkUrl">{{ item.menuName }}</router-link>
          </li>

但是css样式还是要的

    .active {

          border-bottom: 2px solid #ffd04b;

          color: #ffd04b;

        }

 

3)页面效果

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值