vue-router的使用技巧
一、安装
npm install vue-router
二、引入
main.ts引入
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'const app = createApp(App)app.use(router)
app.mount('#app')
三、定义路由文件
路由的参数
meta添加路由的其他参数
redirect: '/emit', //重定向
alias: ['/jx', '/jx1', '/jx2'],//别名
children: []//子路由
import {createRouter, createWebHistory, RouteRecordRaw} from 'vue-router'declare module 'vue-router' {interface RouteMeta {title: string}
}const routes: Array<RouteRecordRaw> = [{path: '/',name: 'component',meta: {title: '123'},component: () => import('../view/App_component.vue'),children: [{path: '/emit',components: {default: () => import('../view/App_emit.vue')}},{path: '/define',components: {aaa: () => import('../view/App_define.vue')}},{path: '/tsx',components: {default: () => import('../view/App_tsx')}}]}
]const router = createRouter({history: createWebHistory(),routes
})export default router
路由模式的原理
//createWebHashHistory
/*** 原理window.addEventListener('hashchange',(e)=>{console.log(e)})* location.hash = '/bus'*///createWebHistory
/*** 原理window.addEventListener('popstate',(e)=>{console.log(e)})* history.pushState({}, '', '/bus')*/
记录页面滚动条的位置
scrollBehavior
const router = createRouter({history: createWebHistory(),scrollBehavior: (to, from, save) => { //记录页面的滚动条位置console.log(save);if (save) {return save} else {return {top: 0}}},routes
})
四、使用
RouterLink跳转,添加replace不记录历史
RouterView显示路由对应的界面
<template><!-- <RouterLink to="/">component</RouterLink><RouterLink to="/bus">bus</RouterLink> --><!-- <RouterLink :to="{name:'component'}">component</RouterLink><RouterLink :to="{name:'bus'}">bus</RouterLink> --><!-- <div>replace 不记录历史<RouterLink replace to="/">component</RouterLink><RouterLink replace to="/bus">bus</RouterLink></div> --><RouterView></RouterView>
</template>
js跳转页面
router.push({path: '/index'})
path就是路由对应的url
router.push({name: 'index'})
name就是路由对应的name
router.push({path: '/index',query:{id:'123'}})
query传参,不需要处理路由
router.push({path: '/index',params:{id:'123'}})
params传参,需要修改路由添加对应参数
例如:path: '/index/:id/:name'
<script setup lang="ts">
import { useRouter } from 'vue-router'
const router = useRouter();
const goUrl = (url: string, name: string) => {// router.push({// path: url// })// router.push({// name// })//不记录历史// router.replace(url)// router.go(1); //前进// router.back(); //后退//传参// router.push({// path: url,// query: {// name: 'cqs',// age: 123// }// })// 传参router.push({name,params: {name: 'cqs',age: 123}})
}
</script>
五、导航守卫
全局导航守卫
let whileList = ['/', '/bus'];
router.beforeEach((to, from, next) => {window.document.title = to.meta.title;if (whileList.includes(to.path)) {next()} else {router.push('/')}
})router.beforeResolve((to, from)=>{})router.afterEach((to, from) => {})
路由独享守卫
beforeEnter: (to, from) => {},
组件内守卫
beforeRouteEnter(to, from) {// 不能获取组件实例},beforeRouteUpdate(to, from) {// 组件已经挂载好了,导航守卫可以访问组件实例},beforeRouteLeave(to, from) {// 在导航离开渲染该组件的对应路由时调用,可以访问组件实例},
相关文章:
vue-router的使用技巧
一、安装 npm install vue-router 二、引入 main.ts引入 import { createApp } from vue import App from ./App.vue import router from ./routerconst app createApp(App)app.use(router) app.mount(#app)三、定义路由文件 路由的参数 meta添加路由的其他参数 redire…...
CV计算机视觉每日开源代码Paper with code速览-2023.11.21
点击CV计算机视觉,关注更多CV干货 论文已打包,点击进入—>下载界面 点击加入—>CV计算机视觉交流群 1.【基础网络架构:Transformer】Multi-entity Video Transformers for Fine-Grained Video Representation Learning 论文地址&…...
人工智能对当代生活的影响
人工智能(AI)是指通过模拟人类智能的方式,使机器能够执行某些需要智能的任务。随着技术的快速发展和应用的广泛推广,人工智能已经深入到我们的日常生活中,对我们的生活和社会产生了深远的影响。本文将探讨人工智能对当…...
笔记:如何搭建一套前端监控系统?(持续更新中)
数据敏感处理 数据加密,对涉及用户隐私的数据做到加密防护 独立部署,不和其它应用共享监控系统 不采集具体数据,只采集用户操作数据 错误采集 Runtime Error: JS运行错误,可通过error监听器捕获 load Error: 资源加载错误&#x…...
在 Ubuntu 上安装最新版的 Calibre
目录 前言 方法1:从 Ubuntu 的仓库安装 Calibre 卸载 Calibre 方法2:获取最新版本的 Calibre 卸载 Calibre 结语 前言 Calibre 是一款自由开源的电子书软件。下面介绍如何在 Ubuntu Linux 上安装它。 作为电子书管理的瑞士军刀,Calibre …...
docker基础学习笔记
文章目录 Docker简介Linux下安装DockerDocker常用命令Docker网络Docker存储docker-composedockerfile制作镜像私有仓库镜像导入导出参考 Docker简介 定义:Docker是一个开源的应用容器引擎优势: 一键部署,开箱即用:容器使用基于im…...
Could not resolve all files for configuration ‘:app:androidJdkImage‘.
在使用./gradlew build编译项目时候遇到了该问题,整体错误如下: * What went wrong: Configuration cache state could not be cached: field generatedModuleFile of com.android.build.gradle.tasks.JdkImageInput bean found in field compilerArgumentProvider…...
GLP-1 , GLP-1R
-- 6VCB_GLP-1R G_protein, GLP-1 peptidea positive allosteric modulator...
【数据结构】F : 道路建设 (Ver. I)
F : 道路建设 (Ver. I) Description 有N个村庄,编号从1到N,你应该建造一些道路,使每个村庄都可以相互连接。 两个村A和B是相连的,当且仅当A和B之间有一条道路,或者存在一个村C使得在A和C之间有一条道路,并…...
flutter 无法从H5 WebView 访问摄像头和录音权限
AndroidManifest.xml需要在 中添加以下权限: <uses-permission android:name"android.permission.INTERNET"/> <uses-permission android:name"android.permission.CAMERA" /> <uses-permission android:name"android.per…...
electron27-react-mateos:基于electron+react18仿matePad桌面系统
基于Electron27React18ArcoDesign搭建桌面版OS管理系统。 electron-react-mateos 基于最新前端跨端技术栈electron27.xreact18arco-designzustand4sortablejs构建的一款仿制matePad界面多层级路由管理OS系统。 ElectronReactOS支持桌面多路由配置,新开窗口弹窗开启路…...
高精度算法总结
高精度加法 题目链接: https://www.acwing.com/activity/content/problem/content/825/ 代码模版: #include <iostream> #include <vector>using namespace std;// C A B vector<int> add(vector<int> &A, vector<…...
EMQX-5.3.1单机集群部署并基于Nginx实现负载均衡
本例单机集群部署使用三个节点,分别为node1、node2、node3 一、安装与配置 1 创建数据目录 mkdir -p node1/data node1/logs mkdir -p node2/data node2/logs mkdir -p mode3/data node3/logs 2 数据目录授权 chown 1000 node1/ node2/ node3/ chown 1000 n…...
电商又有大动静,又一短视频进军电商领域!
我是电商珠珠 电商近几年来发展迅速,截止到23年的10月26日,电商零售平台市场份额是淘宝市场占比的53%,京东为20%,拼多多手握15%的市场占比,三者合计份额已经达到了88%。 剩下的抖音、快手、苏宁也在奋力抢占更多。 …...
C语言线性表的链式存储(框架)
线性表的链式存储 线性表的顺序存储:用一块连续的内存空间 线性表的链式存储:不连续的内存空间 链表是由一系列的节点组成,每个节点包含两个域,一个是数据域,一个是指针域 链表的插入和删除原理 单项链表框架的搭建 …...
webpack配置完热更新之后还是会刷新整个页面
可以在webpack文档中找到有关热更新的详细信息,意思就是,开启热更新之后,整个页面你改了哪里,就只更新哪里,其他没变的,或者保存在缓存里面的内容,都不会改变,感谢很神奇!…...
2023年第六届传智杯程序设计挑战赛(个人赛)B组 赛后复盘
传智杯赛后复盘 大家好 我是寸铁👊 2023年第六届传智杯程序设计挑战赛(个人赛)B组 赛后复盘 喜欢的小伙伴可以点点关注 💝 1. 字符串拼接 细节:一定要清楚nextLine()和next()的区别 nextLine()是遇到回车会停下来 nex…...
C语言——深入理解指针(2)
目录 1. 数组名 2. 指针访问数组 3. 一维数组的传参(本质) 4. 冒泡排序 5. 二级指针 6. 指针数组(指针的数组) 7. 指针数组模拟二维数组 1. 数组名 在之前的代码中我们使用指针访问过数组的内容。 int arr[10] {1,2,3,4…...
【已解决】HBase 2.2.6 集群部署后,从节点未启动 HRegionServer
问题发现 今天搭建了 HBase 2.2.6 集群环境,启动之后发现,从节点的 HRegionServer 未启动。多次对比参数设置仍然未发现异常。而启动之前的 HBase 2.4.11 则完成正常,我就有点怀疑是不是 HBase 2.2.6 集群搭建有什么特殊的地方? …...
JVM——垃圾回收(方法区中的垃圾回收和(堆回收)自动垃圾回收)
目录 1.自动垃圾回收介绍1.C/C的内存管理2.Java的内存管理3.垃圾回收的对比 2.方法区的回收方法区的回收 – 手动触发回收 3.堆回收1.引用计数法2.可达性分析算法 1.自动垃圾回收介绍 1.C/C的内存管理 ⚫ 在C/C这类没有自动垃圾回收机制的语言中,一个对象如果不再…...
7.4.分块查找
一.分块查找的算法思想: 1.实例: 以上述图片的顺序表为例, 该顺序表的数据元素从整体来看是乱序的,但如果把这些数据元素分成一块一块的小区间, 第一个区间[0,1]索引上的数据元素都是小于等于10的, 第二…...
day52 ResNet18 CBAM
在深度学习的旅程中,我们不断探索如何提升模型的性能。今天,我将分享我在 ResNet18 模型中插入 CBAM(Convolutional Block Attention Module)模块,并采用分阶段微调策略的实践过程。通过这个过程,我不仅提升…...
智慧工地云平台源码,基于微服务架构+Java+Spring Cloud +UniApp +MySql
智慧工地管理云平台系统,智慧工地全套源码,java版智慧工地源码,支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求,提供“平台网络终端”的整体解决方案,提供劳务管理、视频管理、智能监测、绿色施工、安全管…...
为什么需要建设工程项目管理?工程项目管理有哪些亮点功能?
在建筑行业,项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升,传统的管理模式已经难以满足现代工程的需求。过去,许多企业依赖手工记录、口头沟通和分散的信息管理,导致效率低下、成本失控、风险频发。例如&#…...
ServerTrust 并非唯一
NSURLAuthenticationMethodServerTrust 只是 authenticationMethod 的冰山一角 要理解 NSURLAuthenticationMethodServerTrust, 首先要明白它只是 authenticationMethod 的选项之一, 并非唯一 1 先厘清概念 点说明authenticationMethodURLAuthenticationChallenge.protectionS…...
uniapp微信小程序视频实时流+pc端预览方案
方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度WebSocket图片帧定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐RTMP推流TRTC/即构SDK推流❌ 付费方案 (部分有免费额度&#x…...
汇编常见指令
汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX(不访问内存)XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...
IT供电系统绝缘监测及故障定位解决方案
随着新能源的快速发展,光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域,IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选,但在长期运行中,例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...
uniapp中使用aixos 报错
问题: 在uniapp中使用aixos,运行后报如下错误: AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...
Device Mapper 机制
Device Mapper 机制详解 Device Mapper(简称 DM)是 Linux 内核中的一套通用块设备映射框架,为 LVM、加密磁盘、RAID 等提供底层支持。本文将详细介绍 Device Mapper 的原理、实现、内核配置、常用工具、操作测试流程,并配以详细的…...
