uniapp路由—— uni-simple-router

藏宝库编辑 · 2024-9-28 06:53:37

要在uniapp中使用路由守卫，uniapp原生的api是比力短缺的，以是要用‘uni-simple-router’插件包

安装

// 项目根目次实验命令行下载稳固版本 npm install uni-simple-router@2.0.7 // 根据pages.json总的页面，自动构建路由表npm install uni-read-pages

设置vue.config.js
注：如果根目次没有vue.config.js文件，要手动创建

// vue.config.jsconst 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文件夹下对应的 js文件中写如下代码

import { RouterMount, createRouter } from 'uni-simple-router'; const router = createRouter({ platform: process.env.VUE_APP_PLATFORM, routes: [...ROUTES]});//全局路由前置守卫router.beforeEach((to, from, next) => {//权限控制登录 if(to.meta.auth){ console.log("须要登录"); if("token"){ next(); }else{ console.log("请登录"); } }else{ console.log("不须要登录"); next(); } console.log("前置守卫"+JSON.stringify(to)); });// 全局路由后置守卫router.afterEach((to, from) => { console.log('跳转竣事')}) export { router, RouterMount}

main.js

import {router,RouterMount} from './router/router.js' //路径换成自己的Vue.use(router) //v1.3.5起 H5端你应该去除原有的app.$mount();使用路由自带的渲染方式// #ifdef H5 RouterMount(app,router,'#app')// #endif // #ifndef H5 app.$mount(); //为了兼容小步调及app端必须如许写才有效果// #endif

page.json

uniapp路由—— uni-simple-router

浏览过的版块

所属分类: 问答交流

新帖推荐: 30日

推荐作品