美文网首页小程序
uni-app配置路由

uni-app配置路由

作者: 废弃的种子 | 来源:发表于2020-04-16 22:12 被阅读0次

    uni-read-pages

    该文件配合vue.config.js可以获得pages.json的路径文件,path,name等等

    即获取全局变量。

    文档

    https://www.npmjs.com/package/uni-read-pages

    http://hhyang.cn/src/router/tutorial/rgRoutes.html#%E5%AE%89%E8%A3%85

    详细步骤

    • npm install uni-read-pages
    • 根目录下新建vue.config.js文件
    const TransformPages = require('uni-read-pages')
    const tfPages = new TransformPages({
         includes:['path','flag']
    })
    module.exports = {
        configureWebpack: {
            plugins: [
                new tfPages.webpack.DefinePlugin({
                    ROUTES: JSON.stringify(tfPages.routes)
                })
            ]
        }
    }
    
    • pages.json需要配置path、flag
    • 在任何一个组件输出console.log(ROUTES)
      如:


      image.png

    uni-simple-router

    获取到pages.json所有路径变量后,当然需要设置前置守卫

    • npm install uni-simple-router
    • 继续配置就行了
      在路由文件中配置:
    import Vue from 'vue';
    import Router from 'uni-simple-router';
    Vue.use(Router)
    //初始化
    const router = new Router({
        routes:ROUTES //路由表
    });
    
    //全局路由前置守卫
    let chushi = '';
    router.beforeEach((to, from, next) => {
        if (to.flag) {
            //当前进入的路径
            
        }
         
    })
    
    
    // 例子
    // const router = new VueRouter({
    //   routes,
    // });
    //   //进入的路由   要出去的路由
    // router.beforeEach((to, from, next) => {
    //   document.title=to.meta.title||"学生管理系统";
    //   //判断是否校验路由
    //   if (to.meta.isAure) {
    //     let name = sessionStorage.getItem('username');
    //     //有状态,并且存在sessionStorage,则next,否则返回登陆页面
    //     if (name) {
    //       next();
    //     } else {
    //       next({path: "/login",query:{redirect:to.name}});
    //     }
    //   } else {
    //     next();
    //   }
    // });
    // export default router;
    
    

    这里的路由不用注入vue实例中也可以,感觉和vue的路由不一样

    文档:
    http://hhyang.cn/

    方法2

    使用同步的本地存储来检测登陆状态

    main.js
    //检查登陆
    Vue.prototype.checkLogin = function(backpage, backtype){
        var SUID  = uni.getStorageSync('SUID');
        var SRAND = uni.getStorageSync('SRAND');
        var SNAME = uni.getStorageSync('SNAME');
        var SFACE = uni.getStorageSync('SFACE');
        if(SUID == '' || SRAND == '' || SFACE == ''){
            uni.redirectTo({url:'../login/login?backpage='+backpage+'&backtype='+backtype});
            return false;//检测没有登陆,回到登陆页面
        }
        return [SUID, SRAND, SNAME, SFACE];//登陆成功后,返回
    }
    
    其他页面检测登陆信息
     loginRes = this.checkLogin('../write/write', '2');
            //如果没有,则返回false
            if(!loginRes){return false;}
    登陆页面
         // 登录成功 记录会员信息到本地,1和2 为如何跳转
                        if(res.status == 'ok'){
                            uni.showToast({title:"登录成功"});
                            uni.setStorageSync('SUID' , res.data.u_id + '');
                            uni.setStorageSync('SRAND', res.data.u_random + '');
                            uni.setStorageSync('SNAME', res.data.u_name + '');
                            uni.setStorageSync('SFACE', res.data.u_face + '');
                            // 跳转
                            if(pageOptions.backtype == 1){
                                uni.redirectTo({url:pageOptions.backpage});
                            }else{
                                uni.switchTab({url:pageOptions.backpage});
     }
    

    理解

    到某一个页面时候先检测登陆,如果没有登陆,在main.js中会跳转到登陆页面,在登陆页面的onload中会拿到这个俩个参数,然后根据参数,再跳到之前要去的页面,怎么跳转。

    相关文章

      网友评论

        本文标题:uni-app配置路由

        本文链接:https://www.haomeiwen.com/subject/vpyjvhtx.html