您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)vue自動路由之單頁面項(xiàng)目的示例分析的內(nèi)容。小編覺得挺實(shí)用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。
這是一個什么項(xiàng)目?
答:這是一個單頁面的vue.js項(xiàng)目,主要為了實(shí)現(xiàn)在非build時,進(jìn)行自動路由。簡單點(diǎn)說,就是在請求頁面時,根據(jù)url進(jìn)行動態(tài)添加路由。
自動路由有什么限制嗎?
答:有,因?yàn)槭峭ㄟ^url進(jìn)行動態(tài)添加,所以,在指定文件夾下,組件文件的相對路徑必須與url有一定的關(guān)系。當(dāng)前demo項(xiàng)目,url路徑與modules文件夾下的組件相對路徑一致。例如:
url地址:localhost:5000/home/index
組件路徑:modules/home/index/index.vue
此方式的自動路由能做些什么?
答:
1.動態(tài)權(quán)限控制:在匹配不上路由時,請求后臺獲取是否有權(quán)限,根據(jù)后臺的反饋處理是否添加路由(是否允許訪問)。
2.自動跳轉(zhuǎn)首頁、404頁面等頁面
項(xiàng)目demo地址
vue.js單項(xià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)的首頁頁面 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自動路由之單頁面項(xiàng)目的示例分析”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學(xué)到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。