更新记录

1.0.0(2023-05-21) 下载此版本

第一次上线


平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
× × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

一、下载安装

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

二、mian.js配置

import App from './App'
import Vue from 'vue'

//路由
import {router,RouterMount} from './router' 
Vue.use(router)

Vue.config.productionTip = false

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

三、根目录新建router/index.js

说明:index.js为主要入口,modules/routes.js为路由信息,modules/guards.js为全局守卫

//router/index.js
import {RouterMount,createRouter} from 'uni-simple-router';

import routers from './modules/routes.js' 

import { beforeEach ,afterEach } from './modules/guards.js'

const router = createRouter({
    platform: process.env.VUE_APP_PLATFORM,  

    // #ifdef MP-WEIXIN
    routes: [...routers]
    // #endif

    // #ifdef H5
    routes: [...routers,...ROUTES],
    // #endif
});

//全局路由前置守卫
router.beforeEach(beforeEach);

// 全局路由后置守卫
router.afterEach(afterEach)

export {
    router,
    RouterMount
}
//router/modules/routes.js

//路由信息
const routers = [
    {
        path:'/pages/index/index',
        name:'首页'
    },
    {
        path:'/pages/index/demo',
        name:'测试页',
        beforeEnter:(to,from,next)=>{
            console.log('测试页-路由独享导航守卫');
            next();
        }
    }
];

export default routers
//router/modules/guards.js

//导航守卫

//全局路由前置守卫
export function beforeEach(to, from, next){
    console.log('全局前置性导航守卫');
    next();
}
// 全局路由后置守卫
export function afterEach(to, from){
    console.log('全局后置性导航守卫');
}

***路由独享守卫可自行添加

四、跳转方式

说明:支持uniapp原生和this.$Router模式

uni.navigateTo({
    url:'/pages/index/demo'
})

this.$Router.push({name:'demo'})

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问