这年头做网页设计的，可得看看速度这块。手机上网多方便网页可别慢吞吞地加载。我们这些做前端的得使劲儿想想办法，让网站打开快如闪电，但也不能让服务器给玩儿坏了，让大伙儿们嗨皮上网。听过 Vue Router 没？这可是 Vue.js 的神奇工具，还有懒加载功能，简单好用，网站运行起来快如疾风。
Lazy-Loading介绍
懒加载就像是把重要的东西先下好，等需要时再慢慢下别的。这样弄得飞快还省事，也能帮你省钱。尤其是那些大网站，真的很管用！进网页时一点也不卡哟~
懒蛋下载可牛逼了！特别适合那些网页上一大堆图片啊视频的，不等加载全就能看了，快如闪电！看得好过瘾还有个好处就是占的流量少还不费劲儿，等于给网站减负，真的很不错！
Vue Router的Lazy-Loading
这Vue Router就像个大管家处理着Vue.js的路由，特别在应对加载慢方面很有能耐。加上Webpack那个利器的代码分割功能，咱们就可以乖乖地只加载必要的路由组件，让网页快速地跑起来！
记得安装Vue Router这个插件，用NPM或YARN这两个软件，它们很简单就能搞定。装好后，在主程序文件里加上Vue Router引入语句，再创建一个实例就万事大吉！这样操作起来，你就可以轻松实现路由管理！
搞定后，咱就该试试懒加载这个大招儿！咱把需要用的组件改成动态请求，告诉路由加载啥，这不就快多了吗？还能按需加载省资源呢是不是？
具体示例
以下是一个简单示例代码：
javascript
咱给VueRouter创建个新实例，叫做router。
routes:[
{
path:'/about',
组件那边直接导入了'关于我们'的Vue文件。
npm install vue-router
}
]
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
routes: []
})
new Vue({
router,
render: h => h(App)
}).$mount('#app')
});
看懂这代码没？这里用到了动态导入功能，实现“懒加载”效果！就是说，只要你点击那个“/about”链接，About组件才能慢慢启动。这样的话，网页只会在真正需要时才会下载所需素材和内容，省时又快捷！
这可不只是个组件那么简单，还可以根据需求进行细微调整嘞。想加几层路由？随便搞！子组件立马就能出现！
import Home from '@/views/Home.vue'
const About = () => import('@/views/About.vue')
const router = new VueRouter({
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
}
]
})
path:’/profile’,
component: Profile,
children:[
{
path:’posts’,
那个导入的”./Posts.vue”文档，其实就是组件~
const Profile = () => import('@/views/Profile.vue')
const Posts = () => import('@/views/Posts.vue')
const Followers = () => import('@/views/Followers.vue')
const router = new VueRouter({
routes: [
{
path: '/profile',
name: 'Profile',
component: Profile,
children: [
{
path: 'posts',
name: 'Posts',
component: Posts
},
{
path: 'followers',
name: 'Followers',
component: Followers
}
]
}
]
})
},
path:’followers’,
找到个地儿，直接扔进’People Following’的vue文档就成了。
}
]
学会看这部分代码，你就可以搞定啥叫Vue Router的嵌套路由了对~然后，还能按照需要随心所欲地加载Post和Follower两个部分，让网页跑起来更顺畅！
总结与展望
Vue Router这懒加载功能确实厉害，网页加载速度嗖嗖滴，用着更爽了。不仅如此，而且还能帮咱们server省点儿力气
手机上网看网页已经成为日常，但界面越来越复杂了，这可咋办？别担心，我们有你需要的Vue Router前端解决方案，既简单又实用，功能也是毫不逊色！
让我们来学学如何使用VueRouter懒加载，不仅可以提高页面速度，还能使界面更漂亮！
评论0