uniapp-h5：uni-simple-router添加全局路由拦截（4步）

原创

已于 2023-05-25 16:32:03 修改 · 4.9k 阅读

收录于

当前文章被以下社区和专栏收录：

于 2021-10-23 15:34:14 首次发布

本文档详细介绍了uni-app中如何使用uni-simple-router进行路由管理和拦截器配置，包括安装库、配置vue.config.js、创建router.js、在main.js中引入，并对比了旧的实现方式，强调了App.vue不应包含视图元素的重要性。

uni-simple-router官网文档：快速上手 | uni-simple-router

插件平台兼容性：路由、拦截、最优雅解决方案 uni-simple-router - DCloud 插件市场

App.vue是uni-app的主组件，所有页面都是在App.vue下进行切换的，是页面入口文件。但App.vue本身不是页面，这里不能编写视图元素，也就是没有<template>。具体参考：uni-app官网

一、安装npm库

npm install uni-simple-router
npm install uni-read-pages

二、配置vue.config.js

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