更新记录

1.0.0（2023-05-21）

第一次上线

平台兼容性

一、下载安装

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'})