web学习笔记(六十五)

目录

1. Hash模式和History模式

2. 导航守卫

3. 路由元信息


1. Hash模式和History模式

Hash模式(历史模式)和History模式(哈希模式)是匹配路由的两种模式,一般默认配置Hash模式,可以在index.js页面中将路由匹配的模式换为哈希模式

import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'
// 使用哈希模式需要导入createWebHashHistory
import HomeView from '../views/HomeView.vue'const router = createRouter({// 历史模式history: createWebHistory(import.meta.env.BASE_URL),// 哈希模式history: createWebHashHistory(import.meta.env.BASE_URL),routes: [{path: '/router',name: 'router',// route level code-splitting// this generates a separate chunk (About.[hash].js) for this route// which is lazy-loaded when the route is visited.component: () => import('../views/routerview.vue')}]
});

哈希模式和历史模式的区别:

  • 哈希模式下地址栏中有#号标识,历史模式下则没有#号标识,但两者的传参方式是一样的
  • 在项目打包之前,我们在开发者模式下是观察不到哈希模式和历史模式的区别的,但是当项目打包后我们会发现当我们尝试进入一个不存在的页面时,历史模式会向后端发送请求,因为浏览器没有匹配到路由组件,所以向服务器发送请求页面去了,这种情况下控制台会出现404报错,要想让控制台不报错得加后端配置,如果服务器不存在这个地址就把原页面返回,不要出现404错误,而哈希模式就不会出现这个问题,因为他有#表示,浏览器不会当成url向服务器请求的。

2. 导航守卫

导航守卫就是路由跳转中的一个拦截器。全局前置守卫:所有路由跳转前都会先经过这个守卫的拦截。beforeEach内部返回false表示不同意跳转;返回true同意跳转。

router.beforeEach((to, from,next) => {// to:目的地页面路由 from:当前要切换的路由// 返回false以取消导航// 一般需要授权验证的页面才需要拦截,其他页面直接放行。if (to.path == '/about') {if (localStorage.getItem('token')) next();//已登录,允许跳转else {console.log('请先登录');next(`/login?target=${to.path}`)//跳转登录页面}}// return falseelse {next();//使用了next参数就不再使用返回值true/false来决定是否跳转。因为next()不带参数等价于return true,允许跳转}// 保证任意条件下next只执行一次  })

3. 路由元信息

在 Vue Router 中,路由元信息(Route Meta Fields)是一种用于给路由添加额外信息的方式。通过路由元信息,我们可以为每个路由定义一些自定义的数据,这些数据可以在路由导航守卫和组件中访问,从而实现更灵活的路由控制和处理。我们可以将自定义的数据写道 meta里面。

 routes: [{path: '/',name: 'home',component: HomeView,// meta自定义路由参数只能写在这里面meta: {// 路由元信息,主要是给路由设置自定义参数。isAuth:true,}}]

可以用来认证进入该页面是否需要登录,给需要登陆的页面都加上isAuth,然后在导航守卫中通过isAuth来判断。

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

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

相关文章

几种在ARM MCU上控制流水灯的方法

对于初学者,在ARM单片机上控制流水灯的亮灭是必经之路。控制流水灯的亮灭有很多方法,比如8个LED,可以控制8灯同时亮、灭;可以控制8灯依次亮、灭;可以控制8灯依次亮、灭,然后反方向再依次亮、灭;…

python-NLP常用数据集0.1.012

XNLI数据集 用户语言翻译和跨语言分类的语料库 官网地址:https://github.com/facebookresearch/XNLI下载地址:https://dl.fbaipublicfiles.com/XNLI/XNLI-1.0.zip注意事项:数据集有json格式的,和txt格式的数据格式 txt格式 la…

我们正迈向万物互联

物联网(Internet of Things,IoT)是近年来信息技术领域最引人注目的创新之一。它通过将物理世界与数字世界紧密相连,为我们的日常生活、工业生产、城市管理等多个领域带来了前所未有的变革。本文将深入探讨物联网的基本概念、技术原…

Java 18 新功能概述

Java 18 在 2022 年 3 月 22 日正式发布,Java 18 不是一个长期支持版本。 包含多项新特性和改进,如文件系统链接、文本块、表达式求值API、ForkJoinPool优化、Optional新方法等。 亮点还包括预览特性:Record Pattern Matching for Switch和增…

FMEA与8D间之动态化及关联性——SunFMEA软件

企业做好全面质量管理,需要具备:以事先预防、系统化、动态化、创新性四大理念为核心。 为实现质量管理目标,通常采用不同工具和方法,我们会发现,每种工具都有其特定的对象,很多问题的解决都需要多种工具的…

Android - RadioGroup中多个radiobutton同时被选中问题

问题描述: 动态创建radio button, 并将多个button添加到radio group中。但是实际运行时多个radiobutton会被同时选中: 代码如下: mRadioGroup findViewById(R.id.radioGroup);mDevButtons new RadioButton[device_count];for(int i0;i<device_count;i) {mDevButtons[i] …

C++ - 查找算法 和 其他 算法

目录 一. 查找算法&#xff1a; 1.顺序查找&#xff1a; 2.二分查找&#xff1a; 二. 其他算法&#xff1a; 1.遍历算法&#xff1a; 2.求和、求平均值等聚合算法。 a.求和算法&#xff1a; b.求平均值算法&#xff1a; 一. 查找算法&#xff1a; 1.顺序查找&#xff1…

Python深度学习基于Tensorflow(15)OCR验证码 文本检测与识别实例

文章目录 文本检测文本识别CTC层生成验证码并制作数据集建立模型模型推理 参考 文本检测 文本检测和目标检测类似&#xff0c;其不同之处在于文本目标具有序列特征&#xff0c;有连续性&#xff0c;可以通过结合 Faster R-CNN 和 LSTM 的方式进行文本检测&#xff0c;如 CTPN …

学习请求接口

axios的方法 方法一 方法二 方式三 方式四 ajax请求 fetch请求 学习一下

告别冗长代码:Java Lambda 表达式如何简化你的编程

在现代软件开发中&#xff0c;高效和简洁的代码变得越来越重要。Java作为一门成熟而广泛使用的编程语言&#xff0c;一直在不断进化&#xff0c;以满足开发者的需求。Java 8的推出标志着一次重要的飞跃&#xff0c;其中最引人注目的特性之一便是Lambda表达式。 Lambda表达式为J…

RK3588推理RetinaFace出现问题

RK3588推理RetinaFace出现问题 在RK3588上测试RockChip提供的RetinaFace模型时&#xff0c;出现下面的问题 $ python RetinaFace_pic.py done --> Init runtime environment I RKNN: [02:27:16.501] RKNN Runtime Information: librknnrt version: 1.5.2 (c6b7b351a2023…

【区分vue2和vue3下的element UI Cascader 级联选择器组件,分别详细介绍属性,事件,方法如何使用,并举例】

在Vue 2的Element UI和Vue 3的Element Plus中&#xff0c;el-cascader&#xff08;级联选择器&#xff09;组件用于从嵌套的数据中进行选择。以下是对这两个版本下el-cascader组件的属性、事件和方法的详细介绍&#xff0c;并附带示例。 Vue 2的Element UI el-cascader 属性…

Windows11下Docker使用记录(五)

目录 准备1. WSL安装cuda container toolkit2. win11 Docker Desktop 设置3. WSL创建docker container并连接cuda4. container安装miniconda&#xff08;可选&#xff09; Docker容器可以从底层虚拟化&#xff0c;使我们能够在 不降级 CUDA驱动程序的情况下使用 任何版本的CU…

ES6中的class类 及 递归

es6 中的 class可以把它看成是 es5 中构造函数的语法糖&#xff0c;它简化了构造函数的写法&#xff0c;类的共有属性放到 constructor 里面 1. 通过 class 关键字创建类&#xff0c;类名需要定义首字母大写 2.类里面有个 constructor 函数&#xff0c;可以接受传递过来的参数…

音视频开发19 FFmpeg 视频解码- 将 h264 转化成 yuv

视频解码过程 视频解码过程如下图所示&#xff1a; ⼀般解出来的是420p FFmpeg流程 这里的流程是和音频的解码过程一样的&#xff0c;不同的只有在存储YUV数据的时候的形式 存储YUV 数据 如果知道YUV 数据的格式 前提&#xff1a;这里我们打开的h264文件&#xff0c;默认是YU…

储能逆变器测试负载箱是如何实现的

储能逆变器测试负载箱是专门用于模拟各种负载条件的设备&#xff0c;主要用于对储能逆变器进行性能测试和评估。它可以根据实际需求&#xff0c;模拟不同的负载类型、负载大小和负载变化率&#xff0c;从而为储能逆变器的设计和优化提供准确的数据支持。那么&#xff0c;储能逆…

vue3拖拉拽组件面板实现(二)使组件可放大缩小

安装 vue-drag-resize npm i vue-drag-resize 引用 import VueDragResize from "vue-drag-resize/src"; 将组件div改为VueDragResize&#xff0c;绑定 宽w 高h&#xff1b; <VueDragResizev-for"item in list":key"item.id"class"box&q…

【递归、搜索与回溯】搜索

搜索 1.计算布尔二叉树的值2.求根节点到叶节点数字之和3. 二叉树剪枝4.验证二叉搜索树5.二叉搜索树中第K小的元素6.二叉树的所有路径 点赞&#x1f44d;&#x1f44d;收藏&#x1f31f;&#x1f31f;关注&#x1f496;&#x1f496; 你的支持是对我最大的鼓励&#xff0c;我们一…

NLP--关键词

在去停用词后的文本中进行词频统计和关键词统计以及词云图显示&#xff0c;来进行文本的关键词提取&#xff0c;让人一目了然。 1.词频统计 统计文本中多次出现的词语&#xff0c;来寻找文章中的关键词&#xff0c;因为多次出现很可能就是关键内容。调用统计数量的Counter库和…

defineProps定义类型

1.props标注类型 原因&#xff1a;确保给组件传递的props是类型安全的 <script setup lang"ts"> //1.使用别名类型或者接口定义Props类型 type Props {name:stringage?:number } //2 使用defineProps注解类型 const props defineProps<Props>() <…