美文网首页
vue3+uniapp配置路由导航守卫

vue3+uniapp配置路由导航守卫

作者: 李小白呀 | 来源:发表于2024-02-21 11:49 被阅读0次

使用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
    };
}

相关文章

  • vue学习笔记(八)导航守卫(全局守卫,路由独享,组件内守卫)

    导航守卫-全局守卫 导航守卫-路由独享 导航守卫-组件内守卫

  • vue-路由导航守卫&异步组件

    导航守卫包括全局导航守卫、路由守卫、组件局部守卫 全局导航守卫 在全局导航守卫中,每次路由的跳转他们三个都会被触发...

  • Vue-Router 导航守卫

    导航守卫 导航表示路由正在发生改变。(变化的路由)导航守卫就是变化的路由钩子。路由钩子的意思可以理解为vue-ro...

  • vue路由守卫

    概念 路由守卫,官网也叫导航守卫,所谓导航,就是路由正在发生变化 路由守卫,主要就是用来通过跳转或取消的方式守卫导...

  • vue导航守卫

    根据作用域的不同,vue导航守卫分三种:全局导航守卫、组件内部导航守卫、路由独享守卫 全局导航守卫,在main.j...

  • vue路由守卫

    一、全局路由守卫 全局前置守卫 next():回调函数参数配置next(false):中断当前的导航。如果浏览器的...

  • vue的路由和路由守卫

    router 和 路由守卫 路由配置 分模块配置 404 配置 懒加载 active-class 路由守卫(跟 a...

  • Vue导航守卫

    Vue导航守卫 理解 导航守卫也叫路由守卫,可以实时的监控路由的跳转过程,在路由的跳转的各个过程执行相应的操作,有...

  • vue-router进阶

    导航守卫 vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航(路由发生改变才会守卫)。参数 ...

  • vue-router导航守卫

    同一个路由,渲染两个router-view 全局的导航守卫(导航钩子): 用于判断有无登陆 里面可配置路由的pro...

网友评论

      本文标题:vue3+uniapp配置路由导航守卫

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