路由需要寫在router文件夾下的index.js中
按照npm 安裝之后給出是示例寫法 是這樣的
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})
但是前些天看到 同學(xué)的另一種寫法 懶加載寫法
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes:[
path:'/',
name:'HelloWorld',
component:resolve=>require(['@/component/HelloWorld'],resolve)
]
})
懶加載 --->延遲加載 ,在需要的時(shí)候進(jìn)行加載,隨用隨載
像vue種種單頁面應(yīng)用,如果么有應(yīng)用懶加載,運(yùn)用webpack打包后的文件將會(huì)異常的大,造成進(jìn)入首頁時(shí),需要加載的內(nèi)容過多,時(shí)間過長(zhǎng),會(huì)長(zhǎng)時(shí)間出現(xiàn)白屏,即使做了loading也是不利于用戶體驗(yàn),而運(yùn)用懶加載則可以將頁面進(jìn)行劃分,需要的時(shí)候加載頁面,可以有效地分擔(dān)首頁所承擔(dān)的加載壓力,減少首頁加載用時(shí)
簡(jiǎn)單的說 進(jìn)入首頁不用一次加載過多的資源造成用時(shí)過長(zhǎng)
如果打包過程 出現(xiàn)報(bào)錯(cuò) 找到build下面的webpack.pro.conf.js 添加publicPath:'./'
補(bǔ)充一點(diǎn) 方法中路由跳轉(zhuǎn)
this.$router.push({name:'home'});
this.$router.go('/login')
