uniapp实现路由拦截——基本配置（-）

uniapp如何实现路由拦截？

今天再次介绍一下 uni-simple-router 插件，记得最初使用时，是在三年以前了，这里简单介绍通过自动读取 pages.json 作为路由表的方式，欢迎指教~

参考文档： uni-simple-router

安装

• 这里使用 NPM 安装

# 安装
  npm install uni-simple-router
  
  npm install uni-read-pages


# 或者： yarn add uni-simple-router

配置 vue.config.js

• 配置 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 )
			})
		]
	}
}

创建 router

• 创建路由，例在项目根目录下创建 router 文件夹
• 新建并写入 index.js

import {
	RouterMount,
	createRouter
} from '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
}

在 main.js 引入 router.js

import Vue from 'vue'
import App from './App'
import { router, RouterMount } from './router'  //路径换成自己的
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

---

至此，基本配置就完成了，请 重新编译 项目~

• 下一站：实战.登录路由拦截案例