效果图

一.配置hash路由

manifest.json-源码视图

"h5":{
	"router": {
		"mode": "hash",
		"base": "/"
	}
}

manifest.json-Web配置

二.安装依赖库 

npm i uni-read-pages@1.0.5  uni-simple-router@2.0.7 nprogress@0.2.0

三.配置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', 'meta']
	  });
	  return JSON.stringify(tfPages.routes)
	}, true)
      })
    ]
  }
}

四.定义白名单文件

在根目录下创建router/whiteList.js

export default [
	'/pages/文件夹/vue文件',
];

五.创建路由文件

在根目录下创建router/index.js

import Vue from 'vue';
import store from "@/store"
import whiteList from "@/router/whiteList.js"

import NProgress from "nprogress";
import "nprogress/nprogress.css";
NProgress.configure({
	showSpinner: false
});

import {RouterMount,createRouter} from 'uni-simple-router';
const router = createRouter({
	platform: process.env.VUE_APP_PLATFORM,  
	routes: [...ROUTES]
});

//全局路由前置守卫
router.beforeEach((to, from, next) => {
	NProgress.start()
	
	if (!!store.state.token || whiteList.includes(to.path)) {
		next();
	} else {
		next('/pages/outside/login');
	}

})

// 全局路由后置守卫
router.afterEach(async (to, from) => {
	NProgress.done();
})

export {
	router,
	RouterMount
};

六.引入使用路由

在main.js文件中引入路由，并在创建Vue实例之前配置和使用它。这是因为Vue实例是应用的根组件，因此必须先创建并配置路由，然后才能创建Vue实例。

注意: 1和2顺序不能乱，否则控制台就会报错:  Cannot read properties of null (reading 'replace')

// #ifndef VUE3
import Vue from 'vue'
import App from './App'


Vue.config.productionTip = false
App.mpType = 'app'


// #ifdef H5
import {
	router,
	RouterMount
} from '@/router/index.js' //路径换成自己的
Vue.use(router)
// #endif

const app = new Vue({
	store,
	...App
})

app.$mount()

// #endif