vue3+uniapp配置路由导航守卫

简介: vue3+uniapp配置路由导航守卫

使用gowiny-uni-router 配置uniapp路由导航守卫
1.安装

npm install @gowiny/uni-router

2.创建router/index.js文件

import {
    createRouter } from '@gowiny/uni-router'
import PAGE_DATA from '@/pages.json';

// const token = uni.getStorageSync('token')
const router = createRouter({
   
    pageData:PAGE_DATA
})
 console.log('token',uni.getStorageSync('token'))
 const whiteList = ['/pages/login/login', '/pages/register/register','/pages/policy/policy','/pages/notify/notify'];
router.beforeEach((to,from)=>{
   
  // debugger
  console.log(whiteList.indexOf(to.path) !== -1)
  if(whiteList.indexOf(to.path) == -1){
   
        if(uni.getStorageSync('token') ){
   
            // next();
            uni.navigateTo({
   
                url: to.path
            });
        }else{
   
            setTimeout(()=>{
     //拦截后一直跳不过去,加上定时器后就好了
                uni.navigateTo({
   
                    url: '/pages/login/login'
                });
            },0)
        }
    }else{
   
        uni.navigateTo({
   
            url: to.path
        });

    }
})

export default router

3.main.js里面配置

import {
    createPinia } from 'pinia'
import {
    createSSRApp } from "vue";
import uviewPlus from '@/uni_modules/uview-plus'
import router from './router'
import App from "./App.vue";

export function createApp() {
   
    const app = createSSRApp(App);
    const pinia  = createPinia();
    app.use(pinia)
    app.use(router)
    return {
   
        app
    };
}
相关文章
|
2月前
|
API
uniapp使用路由名称跳转
【9月更文挑战第11天】在UniApp中,可通过定义路由名称实现页面跳转,需在`pages.json`中设置页面的`name`属性。使用`uni.navigateTo`等API并指定名称即可跳转,例如`name: 'detailPage'`。目标页面可在`onLoad`函数中获取传递的参数,这种方式使代码更清晰且便于维护,尤其适合大型项目。
|
2月前
|
JSON JavaScript 小程序
使用VSCode搭建UniApp + TS + Vue3 + Vite项目
`uniapp` 是一个基于 Vue.js 的框架,支持一次开发多端部署,深受前端开发者喜爱。本文详细介绍如何使用 `VSCode` 搭建 `uniapp` 项目,包括安装 `node` 和 `pnpm`、创建项目、安装扩展组件、配置 `Json` 文件注释及安装相关插件。通过这些步骤,你可以高效地使用 `VSCode` 开发 `uniapp` 项目,并享受代码提示和自动补全功能,提高开发效率。
276 24
使用VSCode搭建UniApp + TS + Vue3 + Vite项目
|
3月前
|
移动开发 JavaScript 前端开发
UniApp H5 跨域代理配置并使用(配置manifest.json、vue.config.js)
这篇文章介绍了在UniApp H5项目中处理跨域问题的两种方法:通过修改manifest.json文件配置h5设置,或在项目根目录创建vue.config.js文件进行代理配置,并提供了具体的配置代码示例。
UniApp H5 跨域代理配置并使用(配置manifest.json、vue.config.js)
|
4月前
|
小程序 UED
uniapp 添加分包页面,配置分包预下载
uniapp 添加分包页面,配置分包预下载
91 2
|
4月前
uniapp实战 —— 分类导航【详解】
uniapp实战 —— 分类导航【详解】
84 2
|
4月前
uniapp实战 —— 弹出层 uni-popup (含vue3子组件调父组件的方法)
uniapp实战 —— 弹出层 uni-popup (含vue3子组件调父组件的方法)
505 1
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的校园导航微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的校园导航微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
65 4
|
5月前
|
JSON 缓存 移动开发
原创自研uniapp+vue3手机桌面os管理系统
vue3-uniapp-os一款基于uniapp+vue3跨端手机版后台os系统新解决方案。
270 3
|
5月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的校园导航微信小程序附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的校园导航微信小程序附带文章和源代码部署视频讲解等
53 6
|
4月前
|
小程序 定位技术 API
uniapp 开发微信小程序 --【地图】打开地图选择位置,打开地图显示位置(可开启导航)
uniapp 开发微信小程序 --【地图】打开地图选择位置,打开地图显示位置(可开启导航)
343 0