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

news2024/11/17 11:30:28

编程式导航声明方法,前进和后退导航

 在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

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

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

相关文章

linux查看服务器系统版本命令

有时我们需要在linux服务器上安装DB、Middleware等,为了保证兼容性,我们需要知晓被提供的linux服务器版本是否满足需求,下面就说一说linux查看服务器系统版本命令。 1.cat /etc/redhat-release 适用于:rhel/centos等 2.cat /etc…

基于minio的dababend部署总结

Databend 是一款开源、弹性、低成本,基于对象存储也可以做实时分析的新式数仓。期待您的关注,一起探索云原生数仓解决方案,打造新一代开源 Data Cloud。 Minio搭建 minio 192.168.10.159 cd /data mkdir minio cd minio wget https://dl…

vue3+vite——打测试包+正式包+本地预览打包后的文件——基础积累

最近在学习vue3vite的内容,发现vite和webpack类似,下面将区别及使用方法做一下记录: 1.vite添加环境配置文件 ... ├── src ... ├── .env # 通用环境变量配置 ├── .env.development …

基于Open3D的点云处理0-测试所用数据下载

地址:github 20220201-data 20220301-data

C. Binary String Copying - 思维

分析: 赛时我是直接模拟的,tle然后mle,补提,发现规律,每一个改变的字符串都只会对应一个需要改变的区间,例如第一个样例前两个101100 -> 011100和101100 -> 011100,对应区间在确定改变的范…

[个人笔记] Windows配置NTP时间同步

Windows - 运维篇 第六章 Windows配置NTP时间同步 Windows - 运维篇系列文章回顾Windows配置NTP时间同步域控环境的NTP配置工作组环境的NTP配置Windows的CMD部分命令集 参考来源 系列文章回顾 第一章 迁移WinSrv系统到虚拟机 第二章 本地安全策略xcopy实现实时备份文件夹内容 …

【Docker 学习笔记】Windows Docker Desktop 安装

文章目录 一、前言二、Windows Docker 安装1. 基于Hyper-V后端和Windows容器的安装2. 基于WSL2后端的安装(推荐)3. 安装Docker Desktop on Windows4. 启动并验证Docker Desktop 一、前言 Docker并非是一个通用的容器工具,它依赖于已存在并运…

Linux C语言实践eBPF

手动编译了解过程 通过对关键步骤make Msamples/bpf的实践,我们已经可以编译出内核源码中提供的ebpf样例。但这还不够我们充分地理解这个编译过程,我们将这编译过程拆解一下,拆解成可以一步步执行的那种,首先是环境准备&#xff…

算法通关村第二关——两两交换链表中的节点的问题解析

题目类型 链表反转 题目描述 给你一个链表,两两交换其中相邻的节点,并返回交换后链表的头节点,且必须在不修改节点内部的值的情况下完成本题,即:只能进行节点交换 效果图 题目分析 如果原始顺序是 dummy(虚拟头节点) …

JavaSE复盘2

Collection接口的接口对象集合(单列集合) List接口:元素按照先后有序保存,可重复 LinkList接口实现类,链表,随机访问,没有同步,线程不安全ArrayList接口实现类,数组&…

❤️创意网页:打造炫酷网页 - 旋转彩虹背景中的星星动画

✨博主:命运之光 🌸专栏:Python星辰秘典 🐳专栏:web开发(简单好用又好看) ❤️专栏:Java经典程序设计 ☀️博主的其他文章:点击进入博主的主页 前言:欢迎踏入…

iOS - 检测项目中无用类和无用图片

一、无引用图片检测 LSUnusedResources 安装插件 LSUnusedResources ,用【My Mac】模拟器运行,如下图: Project Path 就是项目所在的路径,然后点击右下角 Search按钮,就可以看到被搜索出来的图片资源。 注意:这里被搜…

【TypeScript】类型声明及应用(二)

【TypeScript】类型声明及应用(二) 一、前言 TypeScript开发中需要对定义的变量指定类型,目前版本都支持哪些类型,每一个类型都有哪些含义,在这篇文章中,我们将会对其进行总结说明 二、JavaScript基本数据…

预约上门系统源码开发,改变服务行业的未来

预约上门系统源码开发是一项复杂而有挑战性的任务,但也是实现智能化预约服务的关键一步。通过自主开发预约上门系统的源码,企业可以完全定制系统的功能、界面和安全性,从而为用户提供更高效、便捷、个性化的预约体验。本文将带你深入了解预约…

【算法基础:动态规划】5.3 计数类DP(整数拆分、分拆数)

文章目录 例题:900. 整数划分解法1——完全背包解法2——分拆数⭐⭐⭐ 例题:900. 整数划分 https://www.acwing.com/problem/content/902/ 解法1——完全背包 容量是 n,物品的大小和价值是 1 ~ n 中的所有数字。 import java.util.*;pub…

软考A计划-系统集成项目管理工程师-项目人力资源管理-中

点击跳转专栏>Unity3D特效百例点击跳转专栏>案例项目实战源码点击跳转专栏>游戏脚本-辅助自动化点击跳转专栏>Android控件全解手册点击跳转专栏>Scratch编程案例点击跳转>软考全系列 👉关于作者 专注于Android/Unity和各种游戏开发技巧&#xff…

word2vec原理总结

参考文章:https://www.cnblogs.com/pinard/p/7160330.html word2vec是google在2013年推出的一个NLP工具,它的特点是将所有的词向量化,这样词与词之间就可以定量的去度量他们之间的关系,挖掘词之间的联系。 1 词向量编码 1.1 one…

【滑动窗口】算法实战

文章目录 一、算法原理二、算法实战1. leetcode209 长度最小的子数组2. leetcode3 无重复字符的最长子串3. leetcode1004 最大连续1的个数4. leetcode1685 将x减到0的最小操作数5. leetcode904 水果成篮6. leetcode438 找到字符串中所有字母异位词7. leetcode30 串联所有单词的…

助你丝滑过度到 Vue3 其他变化 ②⑨

作者 : SYFStrive 博客首页 : HomePage 📜: VUE3~TS 📌:个人社区(欢迎大佬们加入) 👉:社区链接🔗 📌:觉得文章不错可以点点关注 👉…

【COlor传感器】通过扰动调制光传感实现智能光传输的占用分布估计研究(Matlab代码实现)

💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…