uni-simple-router

main.js

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

router.js

// router.js
//小程序系列无法拦截原生tabbar及原生导航返回，如需拦截请自定义tabbar、header
import {
    RouterMount,
    createRouter
} from 'uni-simple-router';

const router = createRouter({
    platform: process.env.VUE_APP_PLATFORM,
    routerErrorEach:({type,level,...args})=>{
        console.log({type,level,...args})
        // #ifdef APP-PLUS
            if(type===3){
                router.$lockStatus=false;
                uni.showModal({
                    title: '提示',
                    content: '您确定要退出应用吗？',
                    success: function (res) {
                        if (res.confirm) {
                            plus.runtime.quit();
                        } 
                    }
                });
            }
        // #endif
    },
    h5:{
        paramsToQuery: false,
        vueRouterDev: false,
        vueNext: false,
        mode: 'hash',
        base: '/',
        linkActiveClass: 'router-link-active',
        linkExactActiveClass: 'router-link-exact-active',
        scrollBehavior: (to, from, savedPostion) => ({ x: 0, y: 0 }),
        fallback: true
    },
    APP: {
        registerLoadingPage: true,
        loadingPageStyle: () => JSON.parse('{"backgroundColor":"#FFF"}'),
        loadingPageHook: (view) => { view.show() },
        launchedHook: () => { plus.navigator.closeSplashscreen() },
        animation: {}
    },
    applet: {
        animationDuration: 300
    },
    routes: [
        ...ROUTES,
        {
            path: '*',
            redirect: (to) => {
                return {
                    name: '404'
                }
            }
        }
    ]
});
//全局路由前置守卫
router.beforeEach((to, from, next) => {
    next();
});
// 全局路由后置守卫
router.afterEach((to, from) => {
    //console.log('跳转结束')
})

export {
    router,
    RouterMount
}

page.json

{
    "pages": [
        {
            "path": "pages/login/login",
            "name":"login",
            "style": {
                "navigationBarTitleText": "登录"
            }
        },
        {
            "path": "pages/index/index",
            "name":"index",
            "style": {
                "navigationStyle": "custom",
                "navigationBarTitleText": "首页"
            }
        },
        {
            "path": "pages/list/list",
            "aliasPath":"/:name/:path/:data",
            "name":"list",
            "style": {
                "navigationBarTitleText": "列表",
                "app-plus": {
                    "bounce": "vertical",
                    "titleNView": {
                        "autoBackButton":"true"
                    }
                }
            }
        }
    ],
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "",
        "navigationBarBackgroundColor": "#F7F5F6",
        "backgroundColor": "#F7F5F6"
    }
}

跳转

this.$Router.push({
    name:'list',
    params:{
        name:name,
        path:path,
        data:JSON.stringify(item)
    }
})

 

//等同于 uni.navigateTo() 向 history 栈添加一个新的记录
this.$Router.push({
    name:'csvideo',
    params:{
        id:'asd122',
        oid:'99'
    }
})        
//等同于 uni.redirectTo() 替换掉当前的 history 记录
this.$Router.replace({
    name:'csvideo',
    params:{
        id:'asd122',
        oid:'99'
    }
})
//等同于 uni.reLaunch() 将所有的页面都关掉，打开一个新的页面
this.$Router.replaceAll({
    name:'csvideo',
    params:{
        id:'asd122',
        oid:'99'
    }
})
//等同于 uni.switchTab() 打开 tab 菜单
this.$Router.pushTab({
    name:'csvideo',
    params:{
        id:'asd122',
        oid:'99'
    }
})
//等同于 uni.navigateBack() 后退 2 步记录，记录不够用失败
this.$Router.back(2,{
    success:(...arg)=>{
        console.log(arg)
    }
})