当前位置: 首页 > news >正文

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. 取地址重载 默认成员构造函数 上一节我们说过&#xff0c;空类的大…...

从源码角度去深入分析关于Spring的异常处理ExceptionHandler的实现原理

ExceptionHandler的作用 ExceptionHandler是Spring框架提供的一个注解&#xff0c;用于处理应用程序中的异常。当应用程序中发生异常时&#xff0c;ExceptionHandler将优先地拦截异常并处理它&#xff0c;然后将处理结果返回到前端。该注解可用于类级别和方法级别&#xff0c;…...

04mysql查询语句之查询与分页02

1. 所有有门派的人员信息 &#xff08; A、B两表共有&#xff09; 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、概述 可以通过一个原型对象克隆出多个一模一样的对象&#xff0c;该模式被称为原型模式。 在使用原型模式时&#xff0c;需要首先创建一个原型对象&#xff0c;再通过复制这个原型对象来创建更多同类型的对象。 1.2、定义 原型模式&#xff08;Prototype Patt…...

[SQL挖掘机] - 多表连接

介绍: 在 SQL 中&#xff0c;多表连接是指将多个表根据某些条件进行联接&#xff0c;以获取相关联的数据。这允许我们跨多个表进行查询&#xff0c;并且根据表之间的关系获取所需的结果。 作用: 当在多个表中存储相关数据时&#xff0c;使用多表连接可以将这些表组合起来以获…...

Day 14 C++ 对象的初始化和清理

目录 为什么要进行对象的初始化和清理 构造函数和析构函数 构造函数&#xff08;Constructor&#xff09; 构造函数语法 调用时机 构造函数的调用方式 括号法 显式法 隐式转换法 构造函数分类 分类方式 按参数分为有参构造和无参构造 按类型分为普通构造和拷贝构造…...

Delphi7最佳登录窗体设计

Delphi7我们这里用登录窗体来做演示。输入正确用户名和密码后&#xff0c;登录窗体释放&#xff0c;显示主窗体。 方法/步骤 1.打开Delphi7集成开发环境&#xff0c;在默认工程的Form1窗体放置一个Label1控件&#xff0c;拖动控件边界调整大小&#xff0c;并将Object Inspect…...

动脑学院Jetpack Compose学习笔记

最近b站学习了一下Compose相关内容&#xff0c;整理了相关笔记&#xff0c;仅供大家参考。 资源链接如下&#xff0c;象征性收取1个积分 https://download.csdn.net/download/juliantem/88125198...

Qt中线程的使用

Qt中线程的使用 在qt中线程的使用有两种方式&#xff0c;第一种就是创建一个类继承QObject类&#xff0c;之后使用moveToThread函数将线程添加到类中。另一种就是创建一个类继承QThread类&#xff0c;在类中实现run函数。 第一种方式&#xff1a; 1、首先创建一个自定义的类…...

基于YOLOv8开发构建蝴蝶目标检测识别系统

在前面的一篇博文中已经很详细地描述了如何基于YOLOv8开发构建自己的个性化目标检测模型&#xff0c;感兴趣的话可以看下&#xff1a; 《基于YOLOv8开发构建目标检测模型超详细教程【以焊缝质量检测数据场景为例】》 本文的主要目的就是基于YOLOv8来开发构建细粒度的蝴蝶目标…...

【已解决】电脑连上网线但无法上网

文章目录 案例情况解决方案必要的解决方法简要概括详细步骤1、打开控制面板2、打开更改适配器设置3、 找Internet协议版本44、修改配置 可能有用的解决方法 问题解决原理Internet 协议版本 4&#xff08;TCP/IPv4&#xff09;确保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&#xff0c;FE会返回BE的地址&#xff0c;但是在服务器上通过ip addr查看&#xff0c;发现只有局域网IP&#xff0c;所以FE返回了局域网的IP&#xff0c;导致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…...

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周&#xff0c;有很多同学在写期末Java web作业时&#xff0c;运行tomcat出现乱码问题&#xff0c;经过多次解决与研究&#xff0c;我做了如下整理&#xff1a; 原因&#xff1a; IDEA本身编码与tomcat的编码与Windows编码不同导致&#xff0c;Windows 系统控制台…...

第19节 Node.js Express 框架

Express 是一个为Node.js设计的web开发框架&#xff0c;它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用&#xff0c;和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...

Golang dig框架与GraphQL的完美结合

将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用&#xff0c;可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器&#xff0c;能够帮助开发者更好地管理复杂的依赖关系&#xff0c;而 GraphQL 则是一种用于 API 的查询语言&#xff0c;能够提…...

Python爬虫(一):爬虫伪装

一、网站防爬机制概述 在当今互联网环境中&#xff0c;具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类&#xff1a; 身份验证机制&#xff1a;直接将未经授权的爬虫阻挡在外反爬技术体系&#xff1a;通过各种技术手段增加爬虫获取数据的难度…...

工业自动化时代的精准装配革新:迁移科技3D视觉系统如何重塑机器人定位装配

AI3D视觉的工业赋能者 迁移科技成立于2017年&#xff0c;作为行业领先的3D工业相机及视觉系统供应商&#xff0c;累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成&#xff0c;通过稳定、易用、高回报的AI3D视觉系统&#xff0c;为汽车、新能源、金属制造等行…...

【HTTP三个基础问题】

面试官您好&#xff01;HTTP是超文本传输协议&#xff0c;是互联网上客户端和服务器之间传输超文本数据&#xff08;比如文字、图片、音频、视频等&#xff09;的核心协议&#xff0c;当前互联网应用最广泛的版本是HTTP1.1&#xff0c;它基于经典的C/S模型&#xff0c;也就是客…...

Swagger和OpenApi的前世今生

Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章&#xff0c;二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑&#xff1a; &#x1f504; 一、起源与初创期&#xff1a;Swagger的诞生&#xff08;2010-2014&#xff09; 核心…...

精益数据分析(97/126):邮件营销与用户参与度的关键指标优化指南

精益数据分析&#xff08;97/126&#xff09;&#xff1a;邮件营销与用户参与度的关键指标优化指南 在数字化营销时代&#xff0c;邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天&#xff0c;我们将深入解析邮件打开率、网站可用性、页面参与时…...

AI,如何重构理解、匹配与决策?

AI 时代&#xff0c;我们如何理解消费&#xff1f; 作者&#xff5c;王彬 封面&#xff5c;Unplash 人们通过信息理解世界。 曾几何时&#xff0c;PC 与移动互联网重塑了人们的购物路径&#xff1a;信息变得唾手可得&#xff0c;商品决策变得高度依赖内容。 但 AI 时代的来…...

2025季度云服务器排行榜

在全球云服务器市场&#xff0c;各厂商的排名和地位并非一成不变&#xff0c;而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势&#xff0c;对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析&#xff1a; 一、全球“三巨头”…...