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,路由守卫

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

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

相关文章

【C++】深入理解decltype和decltype(auto)

深入理解decltype和decltype&#xff08;auto&#xff09; 一、decltype语法介绍二、decltype的推导规则1. expr不加括号2. expr加上括号 三、关于decltype的CV属性推导四、 decltype(auto) 的使用 一、decltype语法介绍 decltype关键字是C11新标准引入的关键字&#xff0c;它…

Hadoop3:MapReduce源码解读之Map阶段的Job任务提交流程(1)

3、Job工作机制源码解读 用之前wordcount案例进行源码阅读&#xff0c;debug断点打在Job任务提交时 提交任务前&#xff0c;建立客户单连接 如下图&#xff0c;可以看出&#xff0c;只有两个客户端提供者&#xff0c;一个是YarnClient&#xff0c;一个是LocalClient。 显然&a…

Objective-C 学习笔记 | 基础

Objective-C 学习笔记 | 基础 参考书&#xff1a;《Objective-C 编程&#xff08;第2版&#xff09;》 第1部分 入门 Objective-C语言是以C语言为基础的&#xff0c;但增加了对面向对象编程的支持。Objective-C语言是用来开发在苹果iOS以及OS X操作系统上运行的应用的编程语…

植物大战僵尸杂交版 2.0 下载及配置图文教程

文章目录 Part.I IntroductionPart.II 下载Chap.I 下载地址Chap.II 网盘直链下载 Part.III 配置Chap.I 解压与安装Chap.II 加载存档Chap.III 其他设置 Reference Part.I Introduction 最近看大仙儿直播植物大战僵尸&#xff0c;觉得挺好玩的。它大概长这样&#xff1a; 就上网…

使用proteus仿真51单片机的流水灯实现

proteus介绍&#xff1a; proteus是一个十分便捷的用于电路仿真的软件&#xff0c;可以用于实现电路的设计、仿真、调试等。并且可以在对应的代码编辑区域&#xff0c;使用代码实现电路功能的仿真。 汇编语言介绍&#xff1a; 百度百科介绍如下&#xff1a; 汇编语言是培养…

Python GUI编程:深入探索现代GUI库及其创新应用

目录 引言 Python GUI库概览 1. Tkinter 2. PyQt/PySide 3. wxPython 4. Kivy 5. PyGTK 6.FLTK (pyFLTK) 创新应用案例 1. 交互式数据分析工具 2. 智能物联网(IoT)仪表板 3. 增强现实(AR)辅助设计软件 4. 跨平台的科学计算软件 5. 交互式教育软件 实战示例1&…

.NET MAUI 了解MVVM

MVVM 模式中有三个核心组件&#xff1a;模型、视图和视图模型。 每个组件的用途不同。 下图显示了这三个组件之间的关系。 视图 视图负责定义用户在屏幕上看到的结构、布局和外观。 理想情况下&#xff0c;每个视图在 XAML 中定义&#xff0c;代码隐藏有限&#xff0c;不包含业…

linux shell实现打印国际象棋棋盘

chess.sh #!/bin/bashfor i in {1..8} dofor j in {1..8}dosum$[ij]if [ $[sum%2] -eq 0 ];thenecho -ne "\033[46m \033[0m"elseecho -ne "\033[47m \033[0m"fidoneecho done验证&#xff1a;

微信小程序学习笔记(4)

文章目录 1、< template >< / template >2、样式导入i、wxmlii、wxss 3、flex布局i、容器属性ii、项目属性 1、< template >< / template > 模板可以重复调用 首先要定义一个模板&#xff1a; <template name"test"><view>{{…

AbstractMap和SimpleEntry

一、AbstractMap 位置&#xff1a;在java.util包 二、SimpleEntry 1、概述 继承了Map中的内部接口Entry<K,V> SimpleEntry<K,V>不仅继承了Map.Entry<K,V>&#xff0c;还继承了序列化的接口 2、构造方法 方法说明SimpleEntry(K key,V value)通过键值对初…

RabbitMQ-工作模式(Publish模式Routing模式)

文章目录 发布/订阅&#xff08;Publish/Subscribe&#xff09;交换机临时队列绑定总体代码示例 路由&#xff08;Routing&#xff09;绑定直连交换机多重绑定发送日志订阅总体代码示例 更多相关内容可查看 发布/订阅&#xff08;Publish/Subscribe&#xff09; 构建一个简单的…

vue antdesgin table 动态表头动态数据示例

以下是一个基于 Vue 和 Ant Design Vue 的示例&#xff0c;可以动态生成表格的表头和数据&#xff1a; <template><div><a-button click"addColumn">添加列</a-button><a-table :columns"columns" :dataSource"dataSource…

HC-05蓝牙模块配置连接和使用

文章目录 1. 前期准备 2. 进入AT模式 3. 电脑串口配置 4. 配置过程 5. 主从机蓝牙连接 6. 蓝牙模块HC-05和电脑连接 1. 前期准备 首先需要准备一个USB转TTL连接器&#xff0c;电脑安装一个串口助手&#xff0c;然后按照下面的连接方式将其相连。 VCCVCCGNDGNDRXDTXDTXD…

ICLR24大模型提示(8) | 退一步思考:在大型语言模型中通过抽象引发推理

【摘要】我们提出了一种简单的提示技术&#xff0c;即后退提示法&#xff0c;它使 LLM 能够进行抽象&#xff0c;从包含特定细节的实例中得出高级概念和第一原理。通过使用概念和原理来指导推理&#xff0c;LLM 显著提高了遵循正确推理路径解决问题的能力。我们使用 PaLM-2L、G…

Facebook企业户 | Facebook公共主页经营

Facebook作为社交媒体巨头&#xff0c;拥有庞大的用户基数&#xff0c;因此&#xff0c;有效经营公共主页是获取持续流量、提升客户信任度和粘性、促进产品或服务销售与转化的关键。要优化Facebook主页&#xff0c;关注以下几点&#xff1a; 1、参与度是关键指标&#xff1a;因…

Python YOLOv5 7.0 基于深度学习的口罩检测识别系统

目录 1&#xff0c;演示视频和资源下载 1.1 演示视频 1.2 资源下载 2&#xff0c;数据集 3&#xff0c;代码 3.1 带 PyQt5 UI 的检测程序&#xff0c;基于YOLOv5 7.0 3.1.1 根据训练结果进行检测 3.1.2 自动保存每张图片/每帧的检测结果 3.1.3 筛选查看每张图片/每帧检…

Linux---sudo命令

文章目录 目录 文章目录 一.sudo命令简介 二.sudo 命令的特点 三.sudo 相关文件 四.sudo 命令授权配置 一.sudo命令简介 sudo 命令全称“SuperUser Do”&#xff0c;是Linux系统中的一个命令能够使普通用户以超级用户身份去执行某些命令。 二.sudo 命令的特点 sudo能够授权…

HC05蓝牙模块与笔记本蓝牙连接

文章目录 1. 电脑和蓝牙模块连接 2. 串口软件调试 1. 电脑和蓝牙模块连接 HC05支持SPP协议&#xff0c;使用PC主机自带蓝牙&#xff0c;或者笔记本加蓝牙适配器。与HC05连接后&#xff0c;可在电脑端虚拟出串口&#xff0c;这样上位机软件就可以像操作串口一样与HC05通信。对…

[ROS 系列学习教程] 建模与仿真 - 使用 Arbotix 控制机器人

ROS 系列学习教程(总目录) 本文目录 一、Arbotix 简介二、安装Arbotix三、配置Arbotix控制器四、配置launch启动文件五、数据交互接口六、在rviz中仿真控制机器人6.1 直接发topic控制6.2 使用键盘控制6.3 编写代码控制机器人移动 前面讲了机器人的建模&#xff0c;是静态的&…

二进制中1的个数-java

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 目录 前言 一、二进制中1的个数 二、算法思路 1.将一个整数转化成二进制形式 2.查询一个数的二进制数中的第k位是多少 3.lowbit(x)操作 三、代码如下 1.代码如下&…