当前位置: 首页 > news >正文

Vue2 VueRouter学习笔记

VueRouter

官方文档
版本对应
vue2:3.x.x
vue3:4.x.x

路由:访问路径与vue组件(页面)之间的映射关系
VueRouter:Vue官方提供的插件,本质上是一个 JavaScript 库,用于在 Vue.js 应用中实现路由功能

这里以vue2项目为例,版本3.6.5

1. 配置插件

VueRouter是一个第三方js库,类比axios,需要先下载,然后导入到项目中
下载:

npm install vue-router@3.6.5

导入:

import VueRouter from 'vue-router';

注册插件:把插件的功能添加到Vue构造函数中,给Vue实例对象添加了routerroute属性

Vue.use(VueRouter);

创建路由器实例:

const router = new VueRouter({routes: []
});

把路由器注入到Vue实例:给router属性赋值

new Vue({el: '#app',router, // 将路由器传递给 Vue 实例 router: routerrender: h => h(App)
});

2. 基本使用

vue组件可以当页面,也可以当标签组件,页面组件一般写在views目录下

下面我准备了3个页面
准备页面
注册路由

import FindMusic from './views/FindMusic.vue'
import MyInfo from './views/MyInfo.vue'
import MyFriends from './views//MyFriends.vue'...const router = new VueRouter({routes:[{ path: '/find', component: FindMusic },{ path: '/friend', component: MyFriends },{ path: '/me', component: MyInfo }]
})...

使用

<template><div id="app"><div class="nav"><a href="#/find">发现音乐</a><a href="#/friend">我的好友</a><a href="#/me"></a></div><div><router-view></router-view></div></div>
</template>

效果如下:
路由跳转

3. 项目开发

新建一个router目录用来存放router对象,用来专门维护路由
最后在main.js中导入这个对象就可以了
路由目录
修改代码,index.js内容如下:

import Vue from 'vue'
import VueRouter from 'vue-router'import FindMusic from '@/views/FindMusic.vue' // src目录 = @
import MyInfo from '@/views/MyInfo.vue'
import MyFriends from '@/views//MyFriends.vue'Vue.use(VueRouter)const router = new VueRouter({routes:[{ path: '/find', component: FindMusic },{ path: '/friend', component: MyFriends },{ path: '/me', component: MyInfo }]
})export default router

声明式导航

单纯使用a标签进行界面跳转,需要记住当前所在的路由页面以实现高亮效果
vue-router提供了一个全局组件 <router-link>取代a标签,本质上就是在a标签的基础上简化了代码

<router-link to="/find">发现音乐</router-link>
<router-link to="/friend">我的好友</router-link>
<router-link to="/me"></router-link>
  • 使用to代替href,可以不用写#号
  • 给当前路由页面对应的a标签自动添加了类:router-link-active,给该类添加样式实现高亮
    router-link-active只要界面在一级目录下,就可高亮,用的多
    router-link-exact-active界面必须在指定界面才高亮
    这两个类名可以自定义,上面的是默认值
    a.router-link-active {color: gold;}
    
    a标签高亮

跳转传参

本质上就是给目标组件对象传值。在注册路由的时候,相当于把route对象赋值给了目标组件的route属性了,你也可以通过给route对象设置属性传值

1 查询参数传参
传过去就是url传参的原理,to里面/path?参数名1=值1&参数名2=值2
拿值:在当前组件的route属性里拿,this.$route.query.参数名

演示:

<router-link to="/find?key=你好">发现音乐</router-link>

获得参数
实际效果

2 动态路由传参(适合单个参数)
路由:/path/:参数名 后面加个?表示参数非必须
to:/path/参数值
获取:this.$route.params.参数名

修改path
实际效果
重定向
redirect: 目标路径
重定向
当路由定位不到,找不到页面的时候可以配置404页面,但是必须在最后一个注册,path:'*'

跳转不出现#号
hash模式:基于a标签,带#号
history模式:不带#号,常用,h5新增,需要服务端支持
history模式

编程式导航

通过js代码实现页面跳转,可以通过触发事件实现跳转

可以这样理解(实际更复杂),router对象中维持了一个栈(先进后出)。如果需要跳转路由,相当于将一个route对象添加进栈

this.$router.push({ path: '/user', query: { id: 123 } });// 如果路由可以直接写路径或者route对象的name
this.$router.push('/user');

参数多的话写对象会更方便一点

类比分析
进栈:this.$router.push() 将新路由添加到浏览器的历史记录中,就像将一个新元素压入栈中。
出栈:this.$router.go(-1) this.$router.back() 会让浏览器回到上一个历史记录条目,就像从栈顶弹出元素。
栈顶:当前显示的路由相当于栈顶的元素,是最近的导航记录。

二级路由

注册组件时,route对象中children:[ ]实现嵌套路由

export default new Router({mode: 'history', // 使用历史模式以避免 URL 中的 hashroutes: [{path: '/parent',component: ParentComponent,children: [{path: 'child-a', // 注意这里不需要 /parent/ 的前缀component: ChildComponentA},{path: 'child-b',component: ChildComponentB}]}]
});

组件缓存

主要用途是在切换组件时,保持组件的状态和避免不必要的重新渲染,提高性能
使用<keep-alive>标签包裹着的组件,会自动实现组件缓存

直接用<keep-alive>包裹<router-view>会缓存所有下面的组件,需要控制缓存的行为

<keep-alive> 属性:

  • include: 仅缓存匹配的组件。可以传递一个字符串、正则表达式或数组。
  • exclude: 排除匹配的组件,不缓存它们。也可以传递字符串、正则表达式或数组。
  • max: 最大缓存组件数。当缓存的组件数超过这个值时,最久未使用的组件会被销毁。

底层:给需要缓存的组件生命周期中添加了两个钩子,disactivated() activated()

  • activated(): 恢复并可见时的调用(类似于 Android 的 onResume())。
  • deactivated(): 处理组件从视图中移除但仍在缓存中时的操作(类似于 Android 的 onPause())。

相关文章:

Vue2 VueRouter学习笔记

VueRouter 官方文档 版本对应 vue2&#xff1a;3.x.x vue3&#xff1a;4.x.x 路由&#xff1a;访问路径与vue组件&#xff08;页面&#xff09;之间的映射关系 VueRouter&#xff1a;Vue官方提供的插件&#xff0c;本质上是一个 JavaScript 库&#xff0c;用于在 Vue.js 应用…...

3D培训大师,化工企业安全教育与应急演练的新助力

化工企业的生产安全培训&#xff0c;作为保障员工生命安全与企业稳定运营的基石&#xff0c;其重要性不言而喻。传统的培训方式内容僵化、形式单一缺乏互动、效果难以评估&#xff0c;越来越不适应化工企业的实际需求。因此&#xff0c;探索和应用更为高效、创新的培训工具&…...

斯坦福大学论文润色chat-gpt指令

Quick Prompts快速提示 To enhance text clarity-为了增强文本清晰度 As a non-native English speaker, kindly help me revise the following text for improved understand clarity. Please check for spelling and sentence structure errors and suggest alternatives.为…...

简单硬件在环搭建(ROS+Prescan+Carsim+simulink)

本文通过ROSPrescanCarsimsimulink搭建简单的硬件在环仿真测试平台。 系统架构如下&#xff1a; 在Windows中运行prescan场景仿真软件&#xff0c;在jetson Nano中运行ROS&#xff0c;硬件上两台电脑通过一根网线相连传输信息&#xff1b; 1.prescan与carsim的集成 在C:\car…...

【Python 数据分析学习】Pandas基础与应用(1)

题目 1 Pandas 简介1.1 主要特征1.2 Pandas 安装 2 Pandas中的数据结构2.1 Series 数据结构和操作2.1.1 Series的数据结构2.1.2 Seres的操作 2.2 DataFrame 数据结构和操作2.2.1 DataFrame 数据结构2.2.2 Dataframe 操作2.2.3 DateFrame 的特殊操作 2.3 Series 和 DataFrame 的…...

pytorch入门(1)——pytorch加载数据初认识

环境配置及其安装&#xff1a; 2023最新pytorch安装&#xff08;超详细版&#xff09;-CSDN博客 pytorch加载数据初认识 Dataset&#xff1a;创建可被Pytorch使用的数据集 提供一种方式获取数据及其label Dataloader&#xff1a;向模型传递数据 为网络提供不同的数据形式 …...

Spring下载文件

1、controller /*** 下载文件通过ID** param auditInformationDTO 靓号稽核文件DTO* param servletResponse 响应体*/ GetMapping(value "/downloadAuditFileByAuditFileId") public void downloadAuditFileByAuditFileId(ModelAttribute final GoodNumberAuditInf…...

如何在数据库中备份表:操作指南与注意事项

在数据库管理中&#xff0c;备份表是一种常见的操作&#xff0c;它可以帮助我们保存数据的当前状态&#xff0c;以便在需要时进行恢复或分析。备份表可以通过创建一个新表并复制原表的所有数据到新表中来实现。 以下是具体的SQL语句&#xff1a; CREATE TABLE backup_table A…...

【数据结构】第八节:链式二叉树

个人主页&#xff1a; NiKo 数据结构专栏&#xff1a; 数据结构与算法 源码获取&#xff1a;Gitee——数据结构 一、二叉树的链式结构 typedef int BTDataType; typedef struct BinaryTreeNode {BTDataType data;struct BinaryTreeNode* left; // 左子树根节点struct BinaryT…...

Fair Graph RepresentationLearning via Diverse Mixture-of-Experts

发表于&#xff1a;WWW23 推荐指数&#xff1a; #paper/⭐⭐ 问题背景&#xff1a; 背景 现实世界的数据很多样&#xff0c;阻止GNN学习公平的表示。当去偏见化后&#xff0c;他们面临着可学知识不足且属性有限的重大问题 解决方法&#xff1a; 应对公平训练导致可学习知识…...

电机驱动开发之驱动板

目录 1.主要器件选型2.原理图设计3.PCB绘制电源调理驱动电路电流反馈位置反馈 4.PCB绘制5.打板验证6.总结 1.主要器件选型 器件参数封装理由LDOLM317DCYR &#xff08;24V-12V 12V-5V&#xff09;SOT-223小电流应用 LDO比DCDC噪声小响应快更为稳定预驱FD6288TTssop-20常见无刷…...

STM32F1 HAL库笔记2_HAL 系统驱动程序

1、HAL 固件驱动程序 API 1.1、如何使用此驱动程序 通用 HAL 驱动程序包含一组通用的 API&#xff0c;PPP 外设驱动程序可以使用这些 API 来开始使用 HAL。HAL 包含两个 API 类别&#xff1a; • 常见的 HAL API • 服务 HAL API 1.2、初始化和去初始化函数 本节提供的功能&a…...

el-table实现当内容过多时,el-table显示滚动条,页面不显示滚动条

估计有不少小伙伴在开发公司的ERP使用el-table都会遇到这么一个问题&#xff0c;就是产品经理提出&#xff0c;页面不出现滚动条&#xff0c;因为不美观。但是当el-table内容过多&#xff0c;超过页面的宽度时候&#xff0c;页面就会有滚动条。那应该如何解决呢?能不能让滚动条…...

Java面试篇基础部分-Java中的异常以及异常处理

导语   在实际的开发过程中,往往会遇到各种各样的编程异常,如何处理这些异常,直接会影响到整个程序和系统的稳定性,如果不能在合适的地方抛出合适的异常或者是对异常进行捕获。那么就会影响到整个程序的运行。所以如何处理异常,是作为每个开发者来说必不可少的开发技能。…...

win11 MySQL的坑

最近升级了系统&#xff0c;导致以前的安装的两个版本MySQL服务无法启动&#xff0c;只能在mysql的bin目录&#xff0c;执行mysqld --console才能启动&#xff0c;mysqld都无法启动&#xff0c; 所幸进行了数据库初始化&#xff0c;这次在MySQL的bin目录执行 mysqld或者mysqld …...

stm32单片机个人学习笔记1(简单介绍)

前言 本篇文章属于stm32单片机&#xff08;以下简称单片机&#xff09;的学习笔记&#xff0c;来源于B站教学视频。下面是这位up主的视频链接。本文为个人学习笔记&#xff0c;只能做参考&#xff0c;细节方面建议观看视频&#xff0c;肯定受益匪浅。 STM32入门教程-2023版 细…...

python中@staticmethod、@classmethod用法

1、类的基础介绍 类对象&#xff1a;定义的类就是类对象 类属性&#xff1a;定义在__init__ 外部的变量 类方法&#xff1a;定义在类中&#xff0c;且被classmethod 装饰的方法 实例对象&#xff1a;类对象实例化后就是实例对象 实例属性&#xff1a;定义在__init__内部带…...

Harmony Next 文件命令操作(发送、读取、媒体文件查询)

查询文件位置 hdc shell mediatool query IMG_20240902_204224.jpg 输出示例 拉取文件 hdc file recv /storage/cloud/100/files/Photo/4/IMG_1725281044_036.jpg aa.jpg 发送文件 hdc file send aa.jpg /storage/media/100/local/files/Docs/Download/ab.jpg 下载目录位置…...

Go语言中的链表与双向链表实现

链表基础 链表是一种由有限元素组成的数据结构&#xff0c;其中每个元素至少使用两个内存空间&#xff1a;一个存储实际数据&#xff0c;另一个存储指向下一个元素的指针&#xff0c;从而形成一个元素序列构成链表。链表的第一个元素称为头结点&#xff0c;而最后一个元素通常…...

开始一个WPF项目时的记忆重载入

目前在工业软件的UI开发方案选择中&#xff0c;WPF仍然是一个重要的选项。 但是其固有的复杂性&#xff0c;对于像我这样&#xff0c;并不是一直在从事界面开发的人来说&#xff0c;每次重启&#xff0c;都需要一两天的适应的时间。所以这里稍微写一个笔记。 还是老办法&…...

使用VSCode开发Django指南

使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架&#xff0c;专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用&#xff0c;其中包含三个使用通用基本模板的页面。在此…...

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

在四层代理中还原真实客户端ngx_stream_realip_module

一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡&#xff08;如 HAProxy、AWS NLB、阿里 SLB&#xff09;发起上游连接时&#xff0c;将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后&#xff0c;ngx_stream_realip_module 从中提取原始信息…...

从零实现STL哈希容器:unordered_map/unordered_set封装详解

本篇文章是对C学习的STL哈希容器自主实现部分的学习分享 希望也能为你带来些帮助~ 那咱们废话不多说&#xff0c;直接开始吧&#xff01; 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...

华硕a豆14 Air香氛版,美学与科技的馨香融合

在快节奏的现代生活中&#xff0c;我们渴望一个能激发创想、愉悦感官的工作与生活伙伴&#xff0c;它不仅是冰冷的科技工具&#xff0c;更能触动我们内心深处的细腻情感。正是在这样的期许下&#xff0c;华硕a豆14 Air香氛版翩然而至&#xff0c;它以一种前所未有的方式&#x…...

招商蛇口 | 执笔CID,启幕低密生活新境

作为中国城市生长的力量&#xff0c;招商蛇口以“美好生活承载者”为使命&#xff0c;深耕全球111座城市&#xff0c;以央企担当匠造时代理想人居。从深圳湾的开拓基因到西安高新CID的战略落子&#xff0c;招商蛇口始终与城市发展同频共振&#xff0c;以建筑诠释对土地与生活的…...

免费数学几何作图web平台

光锐软件免费数学工具&#xff0c;maths,数学制图&#xff0c;数学作图&#xff0c;几何作图&#xff0c;几何&#xff0c;AR开发,AR教育,增强现实,软件公司,XR,MR,VR,虚拟仿真,虚拟现实,混合现实,教育科技产品,职业模拟培训,高保真VR场景,结构互动课件,元宇宙http://xaglare.c…...

Caliper 配置文件解析:fisco-bcos.json

config.yaml 文件 config.yaml 是 Caliper 的主配置文件,通常包含以下内容: test:name: fisco-bcos-test # 测试名称description: Performance test of FISCO-BCOS # 测试描述workers:type: local # 工作进程类型number: 5 # 工作进程数量monitor:type: - docker- pro…...

Unity中的transform.up

2025年6月8日&#xff0c;周日下午 在Unity中&#xff0c;transform.up是Transform组件的一个属性&#xff0c;表示游戏对象在世界空间中的“上”方向&#xff08;Y轴正方向&#xff09;&#xff0c;且会随对象旋转动态变化。以下是关键点解析&#xff1a; 基本定义 transfor…...

ui框架-文件列表展示

ui框架-文件列表展示 介绍 UI框架的文件列表展示组件&#xff0c;可以展示文件夹&#xff0c;支持列表展示和图标展示模式。组件提供了丰富的功能和可配置选项&#xff0c;适用于文件管理、文件上传等场景。 功能特性 支持列表模式和网格模式的切换展示支持文件和文件夹的层…...