企业网站黄页怎么做,广西建设厅网站行业网,html5开源项目管理系统,在那些网站上做企业宣传好uniapp如何实现路由拦截#xff1f; 今天再次介绍一下 uni-simple-router 插件#xff0c;记得最初使用时#xff0c;是在三年以前了#xff0c;这里简单介绍通过自动读取 pages.json 作为路由表的方式#xff0c;欢迎指教~ 文章目录 uniapp如何实现路由拦截#xff1f;安…uniapp如何实现路由拦截 今天再次介绍一下 uni-simple-router 插件记得最初使用时是在三年以前了这里简单介绍通过自动读取 pages.json 作为路由表的方式欢迎指教~ 文章目录 uniapp如何实现路由拦截安装配置 vue.config.js创建 router在 main.js 引入 router.js 参考文档
uni-simple-router 安装
这里使用 NPM 安装
# 安装npm install uni-simple-routernpm 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 H5RouterMount(app, router, #app)
// #endif// #ifndef H5app.$mount(); //为了兼容小程序及app端必须这样写才有效果
// #endif至此基本配置就完成了请 重新编译 项目~
下一站实战.登录路由拦截案例
