使用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

其他的不用做任何改动,然后控制台就可以打印出来啦