Vue如何实现编程式导航声明方法,前进和后退导航
编程式导航声明方法,前进和后退导航

在router中设置路由导航跳转函数

只要发生跳转

导航的声明函数

访问控制系统如何形成

就这三种

导航守卫的案例,写一个Main.Vue 和login .Vue

后台主页

如果想要展示后台主页,就用这种方法


想实现路由跳转,先导入包,再匹配规则,添加后台主页的链接

怎么制造密码登录不上,就切换到不同页面

登录页面登录成功与登录不成功的流程构思

to是什么当前将要访问的路径

去读token 值,然后去判断是不是token 的

如果token有值,直接放行,没有token 值返回登录后台主页

下面是这个案例的演示效果,我点了一下,就能够来到登录主页了

来到login页面了

这就是路由访问路由的控制

演示实例,点击退出登录页面就能够退出登录了

router .Vuejs org是路由的访问的地址

现在做一个案例

npm i vue-router@3.5.2 -S

使用第一步是创建一个路由模块,然后进行挂载

导入两个包,new一个实例

然后共享一下,在main.js中进行挂载一下

登录页面是什么,在页面下面有一个login 页面

这个组件,我们已经画好了,之后呈现出来

导入组件,配置路由规则

页面不展示的原因是缺少router —link

如果想要配置重定向

点击之后就能够展示登录组件,通过router -link 就能够把页面放在页面进行展示了

在用户登录页面中饭我们可以进行输入密码和用户名

我们在组件中找到MyLogin 定义一下数据变量

加一个v-model 进行数据绑定

点击重置的时候,将数据进行重置

定义reset方法

登录页面如何做

把token存到主页中,跳到后台主页当中
我们怎么拿到数据,当我们想通过username ,password,post发送数据给服务器之后

考虑考虑服务器是返回这些数据

token在进行身份认证的时候,Bea...是固定格式,同时空格也是必不可少,这是固定的格式:

你必须要考虑的问题,服务器怎么存储数据,服务器怎么把服务器返回给网页,点击home之后,展示组件

点击home可以匹配到相应的路由规则


一般情况我们会有产品设计图,然后对网站进行复原

页面如何进行设计布局

后台主页样式的写法

点左侧链接,右边展示组件

页面主体区域分了两个侧边栏

左侧边栏放一个组件,右侧边栏放一个div占位

样式写法
MyHeader组件登录推出界面

绑定事件,清空token然后跳转到登录页面

bug之直接访问/home也可以实现登录,如何能够解决这个

左侧每一个tab栏放一个路由链接

右侧放一个占位符,这里要使用嵌套路由,因为我们是home子路由中使用嵌套路由的。

左侧放路由链接右侧放占位符

智慧系统构造先想好有多少tabbar

相关文章:
Vue如何实现编程式导航声明方法,前进和后退导航
编程式导航声明方法,前进和后退导航 在router中设置路由导航跳转函数 只要发生跳转 导航的声明函数 访问控制系统如何形成 就这三种 导航守卫的案例,写一个Main.Vue 和login .Vue 后台主页 如果想要展示后台主页,就用这种方法 想实现路由跳转…...
torch.load 报错 ModuleNotFoundError 或 AttributeError
Python 3.11.3 (main, Apr 7 2023, 19:25:52) [Clang 14.0.0 (clang-1400.0.29.202)] on darwin Type "help", "copyright", "credits" or "license" for more information.正常情况下,我们会使用 torch.save 保存模型的 …...
前端,js , Error in created hook: TypeError ,有bug了
怎么兄弟,遇到bug了???你开心吗,哈哈哈哈...
百度文心千帆大模型平台:企业级大模型服务的新航标
随着人工智能和大数据的快速发展,大模型平台正越来越受到各大企业和个人开发者的青睐。本文将以百度最新推出的文心千帆大模型平台为例,深入分析其在国家战略布局,经济发展趋势,市场变化动向和技术研发周期等方面的影响和应用。同…...
uniApp低功耗蓝牙一键开门、多对多查找、数组匹配数组、开锁
文章目录 htmlJavaScript坑 html <view class"m_t_36"><view class"w_50_ h_100 lh_100 m_l_a m_r_a bc_409eff radius_10 color_fff ta_c" click"openBluetoothAdapter()">一键开门</view> </view>JavaScript export…...
类和对象|六个默认成员函数|const成员函数|运算符重载
文章目录 默认成员构造函数1. 构造函数1.1 概念1.2 特性 2. 析构函数2.1 概念2.2 特性 3. 拷贝构造函数3.1 概念3.2 特性 4. 运算符重载4.1 赋值重载4.2 自增自减重载4.3 取地址操作符重载 5. const成员函数6. 取地址重载 默认成员构造函数 上一节我们说过,空类的大…...
从源码角度去深入分析关于Spring的异常处理ExceptionHandler的实现原理
ExceptionHandler的作用 ExceptionHandler是Spring框架提供的一个注解,用于处理应用程序中的异常。当应用程序中发生异常时,ExceptionHandler将优先地拦截异常并处理它,然后将处理结果返回到前端。该注解可用于类级别和方法级别,…...
04mysql查询语句之查询与分页02
1. 所有有门派的人员信息 ( A、B两表共有) INSERT INTO t_dept(deptName,address) VALUES(华山,华山); INSERT INTO t_dept(deptName,address) VALUES(丐帮,洛阳); INSERT INTO t_dept(deptName,address) VALUES(峨眉,峨眉山); INSERT INTO t_dept(deptN…...
原型模式——对象的克隆
1、简介 1.1、概述 可以通过一个原型对象克隆出多个一模一样的对象,该模式被称为原型模式。 在使用原型模式时,需要首先创建一个原型对象,再通过复制这个原型对象来创建更多同类型的对象。 1.2、定义 原型模式(Prototype Patt…...
[SQL挖掘机] - 多表连接
介绍: 在 SQL 中,多表连接是指将多个表根据某些条件进行联接,以获取相关联的数据。这允许我们跨多个表进行查询,并且根据表之间的关系获取所需的结果。 作用: 当在多个表中存储相关数据时,使用多表连接可以将这些表组合起来以获…...
Day 14 C++ 对象的初始化和清理
目录 为什么要进行对象的初始化和清理 构造函数和析构函数 构造函数(Constructor) 构造函数语法 调用时机 构造函数的调用方式 括号法 显式法 隐式转换法 构造函数分类 分类方式 按参数分为有参构造和无参构造 按类型分为普通构造和拷贝构造…...
Delphi7最佳登录窗体设计
Delphi7我们这里用登录窗体来做演示。输入正确用户名和密码后,登录窗体释放,显示主窗体。 方法/步骤 1.打开Delphi7集成开发环境,在默认工程的Form1窗体放置一个Label1控件,拖动控件边界调整大小,并将Object Inspect…...
动脑学院Jetpack Compose学习笔记
最近b站学习了一下Compose相关内容,整理了相关笔记,仅供大家参考。 资源链接如下,象征性收取1个积分 https://download.csdn.net/download/juliantem/88125198...
Qt中线程的使用
Qt中线程的使用 在qt中线程的使用有两种方式,第一种就是创建一个类继承QObject类,之后使用moveToThread函数将线程添加到类中。另一种就是创建一个类继承QThread类,在类中实现run函数。 第一种方式: 1、首先创建一个自定义的类…...
基于YOLOv8开发构建蝴蝶目标检测识别系统
在前面的一篇博文中已经很详细地描述了如何基于YOLOv8开发构建自己的个性化目标检测模型,感兴趣的话可以看下: 《基于YOLOv8开发构建目标检测模型超详细教程【以焊缝质量检测数据场景为例】》 本文的主要目的就是基于YOLOv8来开发构建细粒度的蝴蝶目标…...
【已解决】电脑连上网线但无法上网
文章目录 案例情况解决方案必要的解决方法简要概括详细步骤1、打开控制面板2、打开更改适配器设置3、 找Internet协议版本44、修改配置 可能有用的解决方法 问题解决原理Internet 协议版本 4(TCP/IPv4)确保IP地址和DNS服务器设置为自动获取 案例情况 网…...
Linux 学习记录57(ARM篇)
Linux 学习记录57(ARM篇) 本文目录 Linux 学习记录57(ARM篇)一、外部中断1. 概念2. 流程图框 二、相关寄存器1. GIC CPU Interface (GICC)2. GIC distributor (GICD)3. EXTI registers 三、EXTI 寄存器1. 概述2. 内部框图3. 寄存器功能描述4. EXTI选择框图5. EXTI_EXTICR1 &…...
Doris注意事项,Doris部署在阿里云,写不进去数据
1.Doris官网 Doris官网https://doris.apache.org/ 2.根本原因 本地idea访问FE,FE会返回BE的地址,但是在服务器上通过ip addr查看,发现只有局域网IP,所以FE返回了局域网的IP,导致idea连接不上BE 3.解决办法 重写Ba…...
502 Bad GateWay报错的解决方法
什么是502 bad gateway 报错 简单来说 502 是报错类型代码 bad gateway 错误的网关。是Web服务器作为网关或代理服务器时收到无效的响应。 用我们的口语说就是运行网站的服务器暂时挂了(不响应)。 产生错误的原因 1.连接超时 我们向服务器发送请求 由于服务器当前链接太多&am…...
openpnp - ReferenceStripFeeder 改版零件
文章目录 openpnp - ReferenceStripFeeder 改版零件概述笔记整体效果散料飞达主体磁铁仓盖板飞达编带中间压条飞达编带两边压条装配体用的8mm编带模型END openpnp - ReferenceStripFeeder 改版零件 概述 官方推荐了ReferenceStripFeeder的模型smd_strip_feeders_mod_tray.zip…...
基于算法竞赛的c++编程(28)结构体的进阶应用
结构体的嵌套与复杂数据组织 在C中,结构体可以嵌套使用,形成更复杂的数据结构。例如,可以通过嵌套结构体描述多层级数据关系: struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...
解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八
现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet,点击确认后如下提示 最终上报fail 解决方法 内核升级导致,需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...
蓝桥杯 2024 15届国赛 A组 儿童节快乐
P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡,轻快的音乐在耳边持续回荡,小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下,六一来了。 今天是六一儿童节,小蓝老师为了让大家在节…...
Python如何给视频添加音频和字幕
在Python中,给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加,包括必要的代码示例和详细解释。 环境准备 在开始之前,需要安装以下Python库:…...
select、poll、epoll 与 Reactor 模式
在高并发网络编程领域,高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表,以及基于它们实现的 Reactor 模式,为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。 一、I…...
全面解析各类VPN技术:GRE、IPsec、L2TP、SSL与MPLS VPN对比
目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec? IPsec VPN 5.1 IPsec传输模式(Transport Mode) 5.2 IPsec隧道模式(Tunne…...
服务器--宝塔命令
一、宝塔面板安装命令 ⚠️ 必须使用 root 用户 或 sudo 权限执行! sudo su - 1. CentOS 系统: yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh2. Ubuntu / Debian 系统…...
HarmonyOS运动开发:如何用mpchart绘制运动配速图表
##鸿蒙核心技术##运动开发##Sensor Service Kit(传感器服务)# 前言 在运动类应用中,运动数据的可视化是提升用户体验的重要环节。通过直观的图表展示运动过程中的关键数据,如配速、距离、卡路里消耗等,用户可以更清晰…...
JavaScript基础-API 和 Web API
在学习JavaScript的过程中,理解API(应用程序接口)和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能,使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...
接口自动化测试:HttpRunner基础
相关文档 HttpRunner V3.x中文文档 HttpRunner 用户指南 使用HttpRunner 3.x实现接口自动化测试 HttpRunner介绍 HttpRunner 是一个开源的 API 测试工具,支持 HTTP(S)/HTTP2/WebSocket/RPC 等网络协议,涵盖接口测试、性能测试、数字体验监测等测试类型…...

