- npm 下載uni-simple-router、uni-read-pages插件
"uni-read-pages": "^1.0.5",
"uni-simple-router": "^2.0.5"
- 根目錄新建router.js
import {
RouterMount,
createRouter
} from 'uni-simple-router';
const router = createRouter({
platform: process.env.VUE_APP_PLATFORM,
routes: [...ROUTES]
});
//全局路由前置守衛(wèi)
router.beforeEach((to, from, next) => {
console.log(to, from);
next();
});
// 全局路由后置守衛(wèi)
router.afterEach((to, from) => {
console.log('跳轉(zhuǎn)結(jié)束')
})
export {
router,
RouterMount
}
- 配置vue.config.js
const TransformPages = require('uni-read-pages')
const {webpack} = new TransformPages()
module.exports = {
configureWebpack: {
plugins: [
new webpack.DefinePlugin({
ROUTES: webpack.DefinePlugin.runtimeValue(() => {
const tfPages = new TransformPages({
includes: ['path', 'name', 'aliasPath','icon'] //需要獲取包涵的字段, 跟pages.json的字段對應(yīng)
});
return JSON.stringify(tfPages.routes)
}, true )
})
]
}
}
- 在main.js引入router.js
import Vue from 'vue'
import App from './App'
import {
router,
RouterMount
} from './router.js'
import store from "@/store/index.js"
import filters from "./filters";
Vue.use(router)
import uView from "uview-ui";
Vue.use(uView);
for (let key in filters) {
Vue.filter(key, filters[key])
}
Vue.config.productionTip = false
Vue.prototype.$store = store
App.mpType = 'app'
const app = new Vue({
store,
...App
})
//v1.3.5起 H5端 你應(yīng)該去除原有的app.$mount();使用路由自帶的渲染方式
// #ifdef H5
RouterMount(app, router, '#app')
// #endif
// #ifndef H5
app.$mount(); //為了兼容小程序及app端必須這樣寫才有效果
// #endif
- vue頁面獲取路由信息
created() {
console.log('ROUTES=---', ROUTES) // 獲取pages.json的全部路由數(shù)據(jù)
},
參考鏈接：
https://github.com/SilurianYang/uni-simple-router
https://github.com/SilurianYang/uni-read-pages文章來源地址http://www.zghlxwxcb.cn/news/detail-508866.html
文章來源：http://www.zghlxwxcb.cn/news/detail-508866.html
到了這里，關(guān)于uni-app集成uni-simple-router、uni-read-pages插件自動讀取page.json文件實現(xiàn)路由管理（無需手動配置路由表）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
