VueRouter3学习笔记
文章目录
- 1,入门案例
- 2,一些细节
- 高亮效果
- 非当前路由会被销毁
- 3,嵌套路由
- 4, 传递查询参数
- 5,命名路由
- 6,传递路径参数
- 7,路径参数转props
- 8,查询参数转props
- 9,replace模式
- 10,编程式导航
- 11,缓存路由组件
- 12,新生命周期
- 13,路由守卫
1,入门案例
安装库。
npm install vue-router@3
准备三个组件。
App.vue
AAA.vue
BBB.vue
<template><div><router-link to="/a">aaa</router-link><router-link to="/b">bbb</router-link><router-view /></div>
</template><template><div>AAA</div>
</template><template><div>BBB</div>
</template>
新建router.js。
import Vue from 'vue'
import VueRouter from 'vue-router'
import AAA from "./AAA.vue"
import BBB from "./BBB.vue"Vue.use(VueRouter)const router = new VueRouter({routes: [{ path: '/a', component: AAA },{ path: '/b', component: BBB }]
})
export default router
main.js。
import router from './router.js'new Vue({render: h => h(App),router
}).$mount('#app')
效果:
2,一些细节
高亮效果
router-link的active-class属性,指定当前路由链接的高亮类名。
<template><div><router-link to="/a" active-class='abc'>aaa</router-link><router-link to="/b" active-class='abc'>bbb</router-link><router-view /></div>
</template>
<style>
.abc {color: red;
}
</style>
非当前路由会被销毁
<template><div>AAA</div>
</template>
<script>
export default {beforeDestroy() {console.log(1);}
}
</script>
3,嵌套路由
AAA内还有CCC和DDD。
二级路由链接要从一级开始写,
配置项无须加斜线。
<template><div><router-link to="/a">aaa</router-link><router-link to="/b">bbb</router-link><router-view /></div>
</template><template><div><router-link to="/a/c">ccc</router-link><router-link to="/a/d">ddd</router-link><router-view /></div>
</template><template><div>BBB</div>
</template><template><div>CCC</div>
</template><template><div>DDD</div>
</template>
router.js。
import Vue from 'vue'
import VueRouter from 'vue-router'
import AAA from "./AAA.vue"
import BBB from "./BBB.vue"
import CCC from './CCC.vue'
import DDD from './DDD.vue'
Vue.use(VueRouter)const router = new VueRouter({routes: [{path: '/a', component: AAA,children: [{path: 'c', component: CCC}, {path: 'd', component: DDD}]},{ path: '/b', component: BBB }]
})
export default router
4, 传递查询参数
发送。
<template><div><router-link to="/a?id=123">aaa</router-link><router-link to="/a?id=124">aaa</router-link><router-link to="/b">bbb</router-link><router-view /></div>
</template>
接收。
<template><div>AAA{{ $route.query.id }}</div>
</template>
发送的第二种写法。
<template><div><router-link :to="{path: '/a',query: {id: 123}}">aaa</router-link><router-link to="/a?id=124">aaa</router-link><router-link to="/b">bbb</router-link><router-view /></div>
</template>
5,命名路由
给路由起个名字。
import Vue from 'vue'
import VueRouter from 'vue-router'
import AAA from "./AAA.vue"
import BBB from "./BBB.vue"Vue.use(VueRouter)const router = new VueRouter({routes: [{ path: '/a', component: AAA, name: "a" },{ path: '/b', component: BBB, name: "b" }]
})
export default router
跳转时传递名称。
<template><div><router-link :to="{name: 'a'}">aaa</router-link><router-link :to="{name: 'b'}">bbb</router-link><router-view /></div>
</template>
6,传递路径参数
发送。
<template><div><router-link to="/a/123">aaa</router-link><router-link to="/a/124">aaa</router-link><router-link to="/b">bbb</router-link><router-view /></div>
</template>
配置。
import Vue from 'vue'
import VueRouter from 'vue-router'
import AAA from "./AAA.vue"
import BBB from "./BBB.vue"Vue.use(VueRouter)const router = new VueRouter({routes: [{ path: '/a/:id', component: AAA },{ path: '/b', component: BBB }]
})
export default router
接收。
<template><div>AAA{{ $route.params.id }}</div>
</template>
7,路径参数转props
启用props,会将所有路径参数通过props传递给组件。
import Vue from 'vue'
import VueRouter from 'vue-router'
import AAA from "./AAA.vue"
import BBB from "./BBB.vue"Vue.use(VueRouter)const router = new VueRouter({routes: [{ path: '/a/:id', component: AAA, props: true },{ path: '/b', component: BBB }]
})
export default router
组件要声明该props。
<template><div>AAA{{ id }}</div>
</template>
<script>
export default {props: ['id']
}
</script>
8,查询参数转props
props写成函数。
import Vue from 'vue'
import VueRouter from 'vue-router'
import AAA from "./AAA.vue"
import BBB from "./BBB.vue"Vue.use(VueRouter)const router = new VueRouter({routes: [{path: '/a', component: AAA, props(route) {return {id: route.query.id}}},{ path: '/b', component: BBB }]
})
export default router
9,replace模式
替换掉之前的路由,而不是压栈。
<template><div><router-link to="/a" replace>aaa</router-link><router-link to="/b" replace>bbb</router-link><router-view /></div>
</template>
10,编程式导航
代码进行跳转。
<template><div><div>AAA</div><button @click="add">按钮</button></div>
</template>
<script>
export default {methods: {add() {this.$router.push("/b")}},
}
</script>
参数可以是对象,与前面route-link的to用法一致。
11,缓存路由组件
不销毁。
<keep-alive><router-view />
</keep-alive>
12,新生命周期
不销毁的时候,激活与失活。
<template><div><div>AAA</div></div>
</template>
<script>
export default {activated() {console.log(1);},deactivated() {console.log(2);},
}
</script>
13,路由守卫
相关文章:

VueRouter3学习笔记
文章目录 1,入门案例2,一些细节高亮效果非当前路由会被销毁 3,嵌套路由4, 传递查询参数5,命名路由6,传递路径参数7,路径参数转props8,查询参数转props9,replace模式10&am…...
「前端+鸿蒙」鸿蒙应用开发-TS函数
在 TypeScript 中,函数是一等公民,这意味着函数可以作为参数传递、作为其他函数的返回值,甚至可以赋值给变量。TypeScript 为 JavaScript 的函数增加了类型系统,使得函数的参数和返回值都具有明确的类型。 TS快速入门-函数 基本函…...

python后端结合uniapp与uview组件tabs,实现自定义导航按钮与小标签颜色控制
实现效果(红框内): 后端api如下: task_api.route(/user/task/states_list, methods[POST, GET]) visitor_token_required def task_states(user):name_list [待接单, 设计中, 交付中, 已完成, 全部]data []color [#F04864, …...
mingw如何制作动态库附python调用
1.mingw和msvc g -fpic HelloWorld.cpp -shared -o test.dllg -L . -ltest .\test.cpp 注意-L后面的.挨不挨着都行,-l不需要-ltest.dll,只需要-ltest 2.dll.cpp extern "C" {__declspec(dllexport) int __stdcall add(int a, int b) {return…...

Vue学习|Vue快速入门、常用指令、生命周期、Ajax、Axios
什么是Vue? Vue 是一套前端框架,免除原生JavaScript中的DOM操作,简化书写 基于MVVM(Model-View-ViewModel)思想,实现数据的双向绑定,将编程的关注点放在数据上。官网:https://v2.cn.vuejs.org/ Vue快速入门 打开页面࿰…...

Python基础教程(八):迭代器与生成器编程
💝💝💝首先,欢迎各位来到我的博客,很高兴能够在这里和您见面!希望您在这里不仅可以有所收获,同时也能感受到一份轻松欢乐的氛围,祝你生活愉快! 💝Ὁ…...

Oracle10.2.0.1冷备迁移之_数据文件拷贝方式
由于阿里云机房要下架旧服务器,单位未购买整机迁移服务,且业务较老不兼容Oracle11g,所以新购买一台新服务器进行安装Oracle10.2.0.1 ,后续再将数据迁移到新服务器上。 id 数据库版本 操作系统版本 实例名 源库 115.28.242.25…...
智能合约中外部调用漏洞
外部调用 : 在智能合约开发中,调用不受信任的外部合约是一个常见的安全风险点。这是因为,当你调用另一个合约的函数时,你实际上是在执行那个合约的代码,而这可能会引入你未曾预料的行为,包括恶意行为。下面…...

转型AI产品经理(4):“认知负荷”如何应用在Chatbot产品
认知负荷理论主要探讨在学习过程中,人脑处理信息的有限容量以及如何优化信息的呈现方式以促进学习。认知负荷定律认为,学习者的工作记忆容量是有限的,而不同类型的认知任务会对工作记忆产生不同程度的负荷,从而影响学习效果。以下…...

【C++11】常见的c++11新特性(一)
文章目录 1. C11 简介2. 常见的c11特性3.统一的列表初始化3.1initializer_list 4. decltype与auto4.1decltype与auto的区别 5.nullptr6.右值引用和移动语义6.1左值和右值6.1.1左值的特点6.1.2右值的特点6.1.3右值的进一步分类 6.2左值引用和右值引用以及区别6.2.1左值引用6.2.2…...
牛客周赛 Round 46 题解 C++
目录 A 乐奈吃冰 B 素世喝茶 C 爱音开灯 D 小灯做题 E 立希喂猫 F 祥子拆团 A 乐奈吃冰 #include <iostream> #include <cstring> #include <algorithm> #include <cmath> #include <queue> #include <set> #include <vector>…...

9.3 Go 接口的多态性
💝💝💝欢迎莅临我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」…...

Java通过字符串字段匹配形成树形结构
Java通过字符串字段匹配形成树形结构 文章目录 Java通过字符串字段匹配形成树形结构数据表模拟数据解决办法:1、domian 类:2、Node层(形成树形关系):3、controller 层4、Util 工具类1、BeanCopierUtil4、Mapper5、Manager(用来组装树形结构)6、测试:有的时候我们形成树形不…...

数字孪生智慧水利:精准管理与智能决策的新时代
图扑数字孪生技术在智慧水利中的应用,通过虚拟模型与真实水利系统的无缝连接,实现对水资源和水利工程的全面监控和精细管理。实时数据采集与动态模拟提升了水利系统的预测和响应能力,从洪水预警到水质监测,数字孪生助力各项决策更…...

基于ChatGLM3的本地问答机器人部署流程
基于ChatGLM3的本地问答机器人部署流程 前言一、确定文件结构1.新建文件夹储存本地模型2.下载源码和模型 二、Anaconda环境搭建1.创建anaconda环境2.安装相关库3.设置本地模型路径4.启动 三、构建本地知识库1.下载并安装postgresql2.安装c库3.配置向量插件 四、线上运行五、 全…...

归并排序——逆序数对的统计
逆序数对的统计 题目描述 运行代码 #include <iostream> using namespace std; #define LL long long const int N 1e5 5; int a[N], tmp[N]; LL merge_sort(int q[], int l, int r) {if (l > r)return 0; int mid l r >> 1; LL res merge_sort(q, l,…...
基于截图和模拟点击的自动化压测工具开发(MFC)
1.背景 想对一个MFC程序做自动压测功能,根据判断程序界面某块区域是否达到预定状态,来自动执行鼠标点击或者键盘输入的操作,以解决测试人员需要重复手动压测问题。 1.涉及的技术 串口控制,基于MFC橡皮筋类(CRectTracker)做一个…...

力扣每日一题 6/10
881.救生艇[中等] 题目: 给定数组 people 。people[i]表示第 i 个人的体重 ,船的数量不限,每艘船可以承载的最大重量为 limit。 每艘船最多可同时载两人,但条件是这些人的重量之和最多为 limit。 返回 承载所有人所需的最小船…...
[知识点] 内存顺序属性的用途和行为
C标准库中定义了以下几种内存顺序属性: std::memory_order_relaxedstd::memory_order_consumestd::memory_order_acquirestd::memory_order_releasestd::memory_order_acq_relstd::memory_order_seq_cst 1. std::memory_order_relaxed 定义:不提供同步…...
JAVA Mongodb 深入学习(二)索引的创建和优化
一、常用索引类型 1、单个索引 单个索引的创建 db.你的表名.createIndex({"你的字段名":1}) 单个索引的创建且是唯一索引 db.你的表名.createIndex({"你的字段名":1}),{ unique: true }) 2、复合索引 将多个过滤的字段,做成索引,…...

Xshell远程连接Kali(默认 | 私钥)Note版
前言:xshell远程连接,私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...
R语言AI模型部署方案:精准离线运行详解
R语言AI模型部署方案:精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案,实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点: 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...
k8s从入门到放弃之Ingress七层负载
k8s从入门到放弃之Ingress七层负载 在Kubernetes(简称K8s)中,Ingress是一个API对象,它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress,你可…...

376. Wiggle Subsequence
376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...
Frozen-Flask :将 Flask 应用“冻结”为静态文件
Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是:将一个 Flask Web 应用生成成纯静态 HTML 文件,从而可以部署到静态网站托管服务上,如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...

P3 QT项目----记事本(3.8)
3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...

Module Federation 和 Native Federation 的比较
前言 Module Federation 是 Webpack 5 引入的微前端架构方案,允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...

使用 SymPy 进行向量和矩阵的高级操作
在科学计算和工程领域,向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能,能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作,并通过具体…...
2023赣州旅游投资集团
单选题 1.“不登高山,不知天之高也;不临深溪,不知地之厚也。”这句话说明_____。 A、人的意识具有创造性 B、人的认识是独立于实践之外的 C、实践在认识过程中具有决定作用 D、人的一切知识都是从直接经验中获得的 参考答案: C 本题解…...

深入浅出深度学习基础:从感知机到全连接神经网络的核心原理与应用
文章目录 前言一、感知机 (Perceptron)1.1 基础介绍1.1.1 感知机是什么?1.1.2 感知机的工作原理 1.2 感知机的简单应用:基本逻辑门1.2.1 逻辑与 (Logic AND)1.2.2 逻辑或 (Logic OR)1.2.3 逻辑与非 (Logic NAND) 1.3 感知机的实现1.3.1 简单实现 (基于阈…...