下面是路由懒加载写法。和非懒加载写法。
# router/index.js
import Vue from ‘vue’
import VueRouter from ‘vue-router’
import User from ‘../components/User’
Vue.use(VueRouter)
const routes = [
{
// 这种写法就是路由的懒加载了,只有当点击跳转这个路由的时候才会向服务器请求js资源,因为
// 打包的时不写懒加载的话,vue会把所有的js都打包到一个js文件下,项目越大,js文件就会变得越大
// 当js变得大了,请求响应会需要时间,浏览器执行js也会需要时间,时间太长了,就变得不那么友好了。
path: ‘/’,
name: ‘Home’,
component:() => import(‘../components/Home’)
},
{
// 这种写法的话,就是常规的路由定义方法,这里所写的代码将会打包进app.随机字符.js js文件中
// 不推荐这种写法。如果你的项目小的话,emm当我没说。因为小项目自身js就不大。加载并不会影响到太多。
path: ‘/user/:userid’,
name: ‘User’,
component:User
},
]
const router = new VueRouter({
//mode: ‘history’,
base: process.env.BASE_URL,
routes
})
export default router