【日记】Vue路由懒加载写法
全栈开发日记
共 539字,需浏览 2分钟
· 2021-12-05
如果你的Vue项目有多个组件,当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。
路由懒加载的三种写法:
// 第一种 官方写法
const Foo = () => import('./Foo.vue')
const router = new VueRouter({
routes: [{ path: '/foo', component: Foo }]
})
// 第二种 改良版
const router = new VueRouter({
routes: [{ path: '/foo', component: () =>{
return import('./Foo.vue')
}
}]
})
// 第三种 网传版
const router = new VueRouter({
routes: [
{path:'/foo', component: resolve=>require(['./Foo.vue'],resolve)}
]
})
评论
Vue路由守卫
路由守卫的作用:控制路由的跳转,在什么时候跳转或者不跳转,是否符合进入该路由的条件,符合即可以进入该路由,不符合那就不让进入该路由(也就是显示不了这个路由对应的组件或者页面)常用场景: 登录(当本地存...
雪天web
0
Vue RouterVue.js 路由管理器
VueRouter是Vue.js官方的路由管理器。它和Vue.js的核心深度集成,让构建单页面应用变得易如反掌。包含的功能有:嵌套的路由/视图表模块化的、基于组件的路由配置路由参数、查询、通配符基于V
Vue RouterVue.js 路由管理器
0