1.打开作者的插件提供地址https://ext.dcloud.net.cn/publisher?id=15159,找到uni-simple-router和uni-read-pages,并将这俩个插件导入到项目中,可以在项目中创建一个文件存放这俩插件,也可以放到components下。
2.如果项目中没有vue.config.js就创建一下这个文件,在项目根目录下
//vue.config.js
const TransformPages = require('./uni_modules/hhyang-uni-read-pages/uni-read-pages@1.0.5') // 这个地址指向自己存放插件的地址
const {webpack} = new TransformPages()
module.exports = {
configureWebpack: {
plugins: [
new webpack.DefinePlugin({
ROUTES: webpack.DefinePlugin.runtimeValue(() => {
const tfPages = new TransformPages({
includes: ['path', 'name', 'aliasPath']
});
return JSON.stringify(tfPages.routes)
}, true )
})
]
}
}
3.创建一个router.js文件,最好是在根目录下创建一个router的文件夹,然后次文件下创建这个文件
// router.js
import {RouterMount,createRouter} from '../uni_modules/hhyang-uni-simple-router/uni-simple-router'; // 这里指向存放插件的地址
const router = createRouter({
platform: process.env.VUE_APP_PLATFORM,
routes: [...ROUTES]
});
//全局路由前置守卫
router.beforeEach((to, from, next) => {
next();
});
// 全局路由后置守卫
router.afterEach((to, from) => {
console.log('跳转结束')
})
export {
router,
RouterMount
}
4.将路由加入到vue中 在 main.js 引入 router.js
// main.js
import Vue from 'vue'
import App from './App'
import {router,RouterMount} from './router/router.js'
Vue.use(router)
App.mpType = 'app'
const app = new Vue({
...App
})
//v1.3.5起 H5端 你应该去除原有的app.$mount();使用路由自带的渲染方式
// #ifdef H5
RouterMount(app,router,'#app')
// #endif
// #ifndef H5
app.$mount(); //为了兼容小程序及app端必须这样写才有效果
// #endif
网友评论