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)页面效果