路由懒加载问题和linkActiveClass属性

最新推荐文章于 2024-08-02 17:03:03 发布

chengxue_123

最新推荐文章于 2024-08-02 17:03:03 发布

阅读量568

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/chengxue_123/article/details/109770390

vue 专栏收录该内容

25 篇文章

订阅专栏

本文探讨了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)页面效果