這篇文章給大家分享的是有關(guān)vue自動(dòng)路由之單頁(yè)面項(xiàng)目的示例分析的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

成都創(chuàng)新互聯(lián)是一家專注于成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站、成都外貿(mào)網(wǎng)站建設(shè)公司與策劃設(shè)計(jì),惠東網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)10年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:惠東等地區(qū)?；輺|做網(wǎng)站價(jià)格咨詢:028-86922220

這是一個(gè)什么項(xiàng)目？

答：這是一個(gè)單頁(yè)面的vue.js項(xiàng)目，主要為了實(shí)現(xiàn)在非build時(shí)，進(jìn)行自動(dòng)路由。簡(jiǎn)單點(diǎn)說(shuō)，就是在請(qǐng)求頁(yè)面時(shí)，根據(jù)url進(jìn)行動(dòng)態(tài)添加路由。

自動(dòng)路由有什么限制嗎？

答：有，因?yàn)槭峭ㄟ^(guò)url進(jìn)行動(dòng)態(tài)添加，所以，在指定文件夾下，組件文件的相對(duì)路徑必須與url有一定的關(guān)系。當(dāng)前demo項(xiàng)目，url路徑與modules文件夾下的組件相對(duì)路徑一致。例如：

url地址：localhost:5000/home/index

組件路徑：modules/home/index/index.vue

此方式的自動(dòng)路由能做些什么？

答：

1.動(dòng)態(tài)權(quán)限控制：在匹配不上路由時(shí)，請(qǐng)求后臺(tái)獲取是否有權(quán)限，根據(jù)后臺(tái)的反饋處理是否添加路由（是否允許訪問(wèn)）。

2.自動(dòng)跳轉(zhuǎn)首頁(yè)、404頁(yè)面等頁(yè)面

項(xiàng)目demo地址

vue.js單項(xiàng)目自動(dòng)路由：https://github.com/bobowire/wireboy.samples/tree/master/vue.js/onepage

具體步驟

1.組件生成

在router文件夾下添加import.js文件，代碼如下圖：

 源碼：

module.exports = file => () => import('@/modules/' + file + '.vue')

2.攔截路由

 在src目錄下，添加autoroute.js文件，代碼如下圖：

源碼：

import router from './router'
const _import = require('./router/import')// 獲取組件的方法
router.beforeEach(async (to, from, next) => {
 // 默認(rèn)的首頁(yè)頁(yè)面
 if (to.fullPath === '/') {
 next('/home/index')
 } else if (to.matched.length === 0) {
 // 獲取組件路徑
 let componentpath = to.fullPath.substring(1) + '/' + to.fullPath.substring(to.fullPath.lastIndexOf('/') + 1)
 // 添加路由
 router.addRoutes([{
 path: to.fullPath,
 name: to.fullPath.substring(to.fullPath.lastIndexOf('/') + 1),
 component: _import(componentpath)
 }])
 // 路由重匹配
 next({ ...to, replace: true })
 } else {
 next()
 }
})

感謝各位的閱讀！關(guān)于“vue自動(dòng)路由之單頁(yè)面項(xiàng)目的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！