小程序

uni-app配置路由

2020-04-16  本文已影响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

详细步骤

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

uni-simple-router

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

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中会拿到这个俩个参数,然后根据参数,再跳到之前要去的页面,怎么跳转。

上一篇 下一篇

猜你喜欢

热点阅读