Vue2-黑马(八)

news2024/11/15 19:55:55

目录:

(1)router-动态路由

(2)router-重置路由

 (3)router-页面刷新


(1)router-动态路由

我们有这样一个需求,不同的用户根据自己的身份不一样,看到的菜单和跳转的路由是不一样的,比如数admin用户系统管理员,它登录后可以看到全部的菜单,但是普通用户只能看到部分菜单,根据身份不同,看到的菜单也不一样。普通用户要跳转的路由也是有限的

那我我们就需要把主页上的菜单路由,跟后台的数据库管理起来

 

 

 

 

创建前端代码:根组件Example15View.vue,和其他组件

 

 在路由js里面:没有其他的路由,只有一些固定的路由:

其他的路由需要从后端获取数据,然后进行动态的配置前端路由里面去:

我们在登录不做麻烦的验证啦,总用一个按钮输入名字来传递过去:模拟登录:

 

(2)router-重置路由

这些菜单中的路由,并不是所有都添加到路由配置中去的,component为null的是不需要加的,需要添加到这也路由的下面,并不是平级添加 

 

 给主页路由加一个名字name:

 this.$router.getRouters():获取所有的路由信息

const {id,path,component} of array  :把循环出来的数组中的对象,解构赋值:把对象的属性对应赋值给变量

 

刚开始路由配置中没有配置数据库表中的路由:访问直接倒转404

 

 点击登录:打印:添加路由之前是路由js配置的4个路由:

 循环之后变成12个啦:路由中新添加了路由

 这个时候再来访问m4就可以啦:

 这个时候有一个问题:比如说先用一个用户访问:路由的显示时内有问题的

 在换一个用户,它是在7个路由的基础上变成了几个路由:新增了2个路由,是不对的应该在4个路由的基础上新增连个路由

 我们应该有一个方法,可以把路由重置到初始状态的方法,在4个路由的基础上新增路由,我们也应该提供一个注销功能,登录在初始路由去新增,注销恢复成初始路由

我们这里登录都做啦:

注意我们这里Vue2:对应的vue router的版本是3.x的    Vue3对应的vue router的版本是4.x的

vue2 3.x的版本里只有新增路由的方法,所以我们需要自己做

 需要自己写一个方法进行

在登录页面 导入这个js

 在登录之前进行重置路由

测试: 

 

 更换用户:路由是在4的基础上发生了变化

 (3)router-页面刷新

我们动态添加的路由会产生页面刷新的问题,登录之后访问新添加的路由没有问题,但是刷新页面后,再次访问就不能了,一刷新页面所有的内容就重置啦就会是的添加的动态路由恢复最初的状态,

 刷新后访问跳转到404:

 怎么解决呢?

这里是服务器返回的数组,动态添加路由:把这些内容抽取成一个方法

 把这些内容抽取到路由的配置js中:需要简单修改一下:因为在在当前js文件里有router,router就是它,不用使用this.$router了使用router就可以

 在登录页面进行导入:

直接调用: 

 我们可以把服务器返回的数据存入浏览器,存入浏览器之后就不会收到浏览器刷新的影响,当页面刷新之后,可以把存入浏览器的数据再取出来,之后再调用添加路由的方法这样就可以把路由的信息进行恢复:

浏览器提供:这两个对象

localStorage对象:这个对象即使你把浏览器关啦,当再次打开浏览器的时候,也可以恢复过来

sessionStorage对象:以标签为单位,如果你把这个标签页关闭啦,就不能恢复 

这里的路由信息并不需要永久保存,使用sessionStrorage就可以啦:

这里需要的参数数据是字符串的类型,我们需要把js数组或者对象数据转换成json的字符串

 

 JSON.stringfy():把javaScript数组或对象转换为json字符串:

 

调试中应用程序:有两个存储:本地存储就是:localStorage  会话存储就是sessionStorage 

 原来的路由配置:创建的路由对象读取的是上面配置的4个,我们路由对象创建完之后,检查一下sassionStorage去检查一下,有没有路由,有的话把它们添加进来 

 JSON.parse():将json字符串,还原成javascript对象

 

 

 先清除sessionStorage:

 

 在登录一下:

 访问m4后刷新:

刷新还能正常访问:

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/420315.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Seaborn 数据可视化基础

目录 介绍 知识点 Seaborn 介绍 快速优化图形 Seaborn 绘图 API 一、散点图: 参数hue hue hue_order 参数style 二 、线形图 三、类别图 绘制箱线图 绘制小提琴图 绘制增强箱线图 绘制点线图 绘制条形图 绘制计数条形图 四、分布图 五、回归图 …

nginx配置

单线程应用 稳定性高 系统资源消耗低 线程切换消耗小 对HTTP并发连接处理能力高 单台服务器可支持2w个并发请求 nginx与apache区别 Nginx相对于Apache的优点: 轻量级,同样是 web 服务,比Apache 占用更少的内存及资源,高并发&#xff0…

攻防世界-file_include(convert.iconv的使用)

代码审计,存在文件包含,直接上伪协议 发现不行,应该是存在字符过滤 知识盲区: 1.file://协议,需要填写绝对路径,只能读取txt文件,后面直接跟绝对路径。 file:///etc/passwd 2.php://filter …

深入浅出 Golang 内存管理

了解内存管理~ 前言: 本节课主要介绍了内存管理知识与自动内存管理机制,并对目前 Go 内存管理过程中存在的问题提出了解决方案,同时结合了上次课程学习的《Go 语言性能优化》相关知识,提供可行性的优化建议 … 自动内存管理 Go…

spring-boot怎么扫描不在启动类所在包路径下的bean

前言: 项目中有多个模块,其中有些模块的包路径不在启动类的子路径下,此时我们怎么处理才能加载到这些类; 1 使用SpringBootApplication 中的scanBasePackages 属性; SpringBootApplication(scanBasePackages {"com.xxx.xx…

C++linux高并发服务器项目实践 day5

Clinux高并发服务器项目实践 day5程序和进程单道、多道程序设计时间片并行和并发进程控制块(PCB)进程状态转换进程的状态进程相关命令进程号和相关函数进程创建父子进程的关系GDB多进程调试程序和进程 程序是包含一系列信息的文件,这些信息描…

你知道怎么实现定时任务吗?

诸位读者都知道笔者写东西都是用到才写,笔者的学习足迹自从参加工作之后就是 非系统 学习了,公司里源代码只要有笔者不知道的技术细节,笔者就会仔细的研究清楚,笔者是不喜欢给自己留下问题的那种学习习惯。 为何要写 笔者最近负…

如何使用Thymeleaf给web项目中的网页渲染显示动态数据?

编译软件:IntelliJ IDEA 2019.2.4 x64 操作系统:win10 x64 位 家庭版 服务器软件:apache-tomcat-8.5.27 目录一. 什么是Thymeleaf?二. MVC2.1 为什么需要MVC?2.2 MVC是什么?2.3 MVC和三层架构之间的关系及工…

AI绘图体验:想象力无限,创作无穷!(文生图)

基础模型:3D二次元 PIXEL ART (1)16-bit pixel art, outside of caf on rainy day, light coming from windows, cinematic still(电影剧照), hdr (2) 16-bit pixel art, island in the clouds, by studio ghibli(吉卜力工作室…

配置基于WSL2的Docker环境并支持CUDA

导言 Content 正如前文windows 10 开启WSL2介绍的,我们可以在windows10中使用linux子系统。今天本文介绍如何在此基础上安装Docker并支持在wsl中使用GPU。 准备工作 加入windows insider preview。建议选Dev通道,不要选Beta。 安装Nvidia WSL2-compa…

【数据结构】-计数排序

🎇作者:小树苗渴望变成参天大树 🎉 作者宣言:认真写好每一篇博客 🎊作者gitee:link 如 果 你 喜 欢 作 者 的 文 章 ,就 给 作 者 点 点 关 注 吧! 文章目录前言一、计数排序二、排序算法复杂度…

Nginx网站服务配置

一、Nginx概述 1.1 Nginx概述 Nginx: Nginx 是开源、高性能、高可靠的 Web 和反向代理服务器,而且支持热部署,几乎可以做到 7 * 24 小时不间断运行,即使运行几个月也不需要重新启动,还能在不间断服务的情况下对软件…

分布式计算技术(上):经典计算框架MapReduce、Spark 解析

当一个计算任务过于复杂不能被一台服务器独立完成的时候,我们就需要分布式计算。分布式计算技术将一个大型任务切分为多个更小的任务,用多台计算机通过网络组装起来后,将每个小任务交给一些服务器来独立完成,最终完成这个复杂的计…

07 -全局状态管理

全局状态管理 7-1:开篇 在上一章中我们完成了 “一半” 的文章搜索功能,并且留下了一些问题。那么这些历史残留的问题,我们将会在本章节中通过 全局状态管理工具 进行处理。 那么究竟什么是 全局状态管理工具,如何在 uniapp 中…

【Flutter进阶】聊一聊组件中的生命周期、状态管理及局部重绘

前言 说到生命周期,熟悉Android开发的小伙伴一定第一时间会想到Activity的生命周期,由于在Flutter中一切都是组件,所以组件的生命周期其实是类似的。 在这个过程中组件的状态——State就非常重要,它记录这整个组件内可变部分的状…

【SSM整合】1—Spring和Mybatis整合

⭐⭐⭐⭐⭐⭐ Github主页👉https://github.com/A-BigTree 笔记链接👉https://github.com/A-BigTree/Code_Learning ⭐⭐⭐⭐⭐⭐ Spring专栏👉https://blog.csdn.net/weixin_53580595/category_12279588.html SpringMVC专栏👉htt…

linux安装kafka

目录 目录 一.安装包准备: 二.解压安装: 先将该安装包放入到/opt/install目录: 解压该文件到soft目录中: 改名,方便后续使用: 三修改其中配置和配置环境变量: 3.1 修改/opt/soft/kafka2…

camunda工作流引擎开发架构

Camunda的开发架构可以分为前端开发架构和后端开发架构。 前端开发架构: Camunda前端使用Angular框架进行开发,主要包括以下组件: 1、Cockpit:流程监控和管理界面。 2、Tasklist:任务管理和审批界面。 3、Admin&…

答题积分小程序云开发实战-开篇:项目介绍以及效果图

答题积分小程序云开发实战 开篇:项目介绍以及效果图 前言 我也看过不少的册子或者文章,大部分都很优秀,但也有的就长篇累牍,从时代背景讲起,复述各种基本概念、底层原理......嗯,看似很高级~ 但我阅读的时候,给我的感觉是,把你绕晕、把你劝退的感觉,相信大家都有同感,…

C++输入输出、缺省参数、函数重载、引用【C++初阶】

目录 一、C输入&输出 二、缺省参数 1、概念 2、分类 (1)全缺省 (2)半缺省 三、函数重载 1、概念 2、原理------名字修饰 一、C输入&输出 在C语言中,我们常用printf和scanf这两个函数进行输入输出。 …