使用uni-read-pages和uni-simple-router实现,方案思路如下
首先在packge.json把下面两个依赖npm install 一下,我目前是这两个版本,别的版本号没有测试过

一键获取完整项目代码
然后再再根目录下面创建一个vue.config.js

代码如下

一键获取完整项目代码
javascript
然后根目录创建一个index.js(这里应该也可以创建目录router/index.js,我没有试过,感兴趣的自己可以试一下)
// router.js
import {RouterMount,createRouter} from 'uni-simple-router';
const scrollInfo={};
const router = createRouter({
platform: process.env.VUE_APP_PLATFORM,
routes: [...ROUTES],
h5:{
scrollBehavior:(to, from, savedPosition)=>{
const XY=scrollInfo[to.path];
if(XY){
return XY;
}
return savedPosition;
}
}
});
//全局路由前置守卫
router.beforeEach((to, from, next) => {
console.log("跳转前");
next();
});
// 全局路由后置守卫
router.afterEach((to, from) => {
console.log('跳转结束')
})
export {
router,
RouterMount
}
一键获取完整项目代码
javascript
然后main.js里面加入如下代码
import Vue from 'vue'
import App from './App'
import {router,RouterMount} from './router.js' //路径换成自己的
Vue.use(router)
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
...App,
})
//v1.3.5起 H5端 你应该去除原有的app.$mount();使用路由自带的渲染方式-----这一步很重要,
// #ifdef H5
RouterMount(app,router,'#app')
// #endif
app.$mount()
一键获取完整项目代码
javascript
其他的不用做任何改动,然后控制台就可以打印出来啦