vue路由 routers的写法:require用与不用
生活随笔
收集整理的這篇文章主要介紹了
vue路由 routers的写法:require用与不用
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
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。
總結
以上是生活随笔為你收集整理的vue路由 routers的写法:require用与不用的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 消息称微软取消Surface耳机等产品,
- 下一篇: 手机微信表情删除操作步骤