vue路由的写法有很多种,这里我只说routers的写法,一种是compcomponent后面直接写路径,另一种是用require的方式,来看代码
import Vue from 'vue'
import Router from 'vue-router'
//首页==================
//import index from '@/components/index'
//产品中心================
import productCenter from '@/components/productCenter/productCenter.vue'
//商务合作==================
import teamwork from '@/components/teamwork/teamwork.vue'
//咨询中心=================
import askCenter from '@/components/askCenter/askCenter.vue'
//关于中棋==================
import aboutUs from '@/components/aboutUs/aboutUs.vue'
Vue.use(Router)
export default new Router({
routes: [
//首页
{
path: '/',
name: 'index',
component:resolve =>require(['index'],resolve)
}
//产品中心
,{
path: '/productCenter',
name: 'productCenter',
component: productCenter
}
//商务合作
,{
path: '/teamwork',
name: 'teamwork',
component: teamwork
}
//咨询中心
,{
path: '/askCenter',
name: 'askCenter',
component: askCenter
}
//关于我们
,{
path: '/aboutUs',
name: 'aboutUs',
component: aboutUs
}
]
})
首先先说明一点,import引入时用到的“@”就相当于“..”;
第二点,重点来了,我们看到index页面是用的require的方式写的路由,所以上面的import就注释掉了,这种写法的好处,不仅仅是简单,还有这样写是按需加载,访问此路由时才加载这个js,会避免进入首页时加载内容过多,因为import引入,当项目打包时路由里的所有component都会打包在一个js中,而用require会将你的component分别打包成不同的js。