vue自動路由-單頁面項目（非build時構(gòu)建）

更新時間：2019年04月30日 13:55:50 作者：吃西瓜的星星

這篇文章主要介紹了vue自動路由-單頁面項目（非build時構(gòu)建）,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下

這是一個什么項目？

答：這是一個單頁面的vue.js項目，主要為了實現(xiàn)在非build時，進行自動路由。簡單點說，就是在請求頁面時，根據(jù)url進行動態(tài)添加路由。

自動路由有什么限制嗎？

答：有，因為是通過url進行動態(tài)添加，所以，在指定文件夾下，組件文件的相對路徑必須與url有一定的關(guān)系。當前demo項目，url路徑與modules文件夾下的組件相對路徑一致。例如：

url地址：localhost:5000/home/index

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

此方式的自動路由能做些什么？

答：

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

2.自動跳轉(zhuǎn)首頁、404頁面等頁面

項目demo地址

vue.js單項目自動路由：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) => {
 // 默認的首頁頁面
 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()
 }
})

總結(jié)

以上所述是小編給大家介紹的vue自動路由-單頁面項目（非build時構(gòu)建），希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！

您可能感興趣的文章: