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

Vue Router基础

 Router 的作用是在单页应用(SPA)中将浏览器的URL和用户看到的内容绑定起来。当用户在浏览不同页面时,URL会随之更新,但页面不需要从服务器重新加载。

1 Router 基础

RouterView

RouterView 用于渲染当前URL路径对应的路由组件。可以放在任何地方。

RouterLink

使得Router能在不重新加载页面的情况下改变URL,处理URL的生成、编码。可以使用router.push()函数来代替。

表 Router的基础组件

Router的使用步骤:

  1. 通过调用createRouter() 函数创建Router实例。参数为一个包含路由数组、history等信息的配置项。
  2. 将路由器实例注册为插件,通过调用app.use()来完成。

Router插件的职责包括:

  1. 全局注册RouterView 和 RouterLink组件。
  2. 添加全局$router和$route属性。
  3. 启用useRouter()和useRoute()组合式函数。
  4. 触发路由器解析初始路由。
<!-- App.vue -->
<template>
<h1>Hello App!</h1>
<router-view />
</template><!-- router/index.ts -->
import HomePage from "@/views/HomePage.vue";
import {createRouter, createWebHashHistory} from "vue-router";const routes = [{ path: '/', component: HomePage }
]const router = createRouter({history: createWebHashHistory(),routes,
})
export default 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')

1.1 动态路由匹配

1.在配置路由列表时,可以配置路径参数,“:参数名”的形式。这些参数及值会映射到$route.params 上的相应字段。

匹配模式

匹配路径

rout.params

/user/:username

/user/hmf

{ username: ‘hmf’ }

/user/:username/other/:info

/user/hmf/other/hello

{ username: ‘hmf’, other: ‘hello’ }

  2.可以监听路由参数。

wathc(()=> route.params,(newVal){// 省略代码,其中route = userRoute()
})

  3.在参数中自定义正则表达式。

  a)在参数后面的括号里定义该参数匹配的正则表达式。

匹配路径

/user/:id(\\d+)

/user/:id

/user/hello

不匹配

匹配

/user/124

匹配

匹配,但优先级低于有正则表达式的参数。

   b) 可重复的参数。如果路径参数值是一个数组,可以用*及+这两个符号将参数标记为可重复:

例如,/user/:ids(\\d+)*,匹配路径/user/123/33/23,route.params 的值为{ids: [123,33,23]}

1.1.1 sensitive 和 strict路由配置

默认情况下,所有路由是不区分大小写的,并且能匹配带有或不带有尾部斜线的路由(例如,匹配模式为/about,非严格模式下,它可以匹配/about/这个路径)。

可以在创建路由器实例时配置sensitive 和 stric。

1.2 路由配置

一些应用程序的UI由多层嵌套的组件组成。在这种情况下,URL的片段通常对应于特定的嵌套组件结构。

实现方式:在组件中包含自己嵌套的<router-view>。例如在User组件的模版内添加一个<router-view>。

<!-- User.vue -->
<template><div class="user"><h2>User {{ $route.params.id }}</h2><router-view /></div>
</template>

对应的路由配置为:

const routes = [{path: '/user/:id',component: User,children: [{path: 'profile',component: UserProfile,},{path: 'posts',component: UserPosts,},],},
]

图 嵌套组件及对应匹配的路径

路由配置时,可以给子路由命名(须唯一值),例如:

{path: '/usr', name: 'user', component: UserHome},在路径导航时,不仅可以通过URL来匹配组件,还可以通过子路由命名。

route.push(‘/usr’) 等效于 route.push({name: ‘user’})

1.2.1 重定向和别名

{ path: '/home', redirect: '/' }, 从/home 重定向到 /

{ path: '/home', redirect: { name: 'homepage' },从/home 重定向到名为“homepage”的路由。

别名意味着URL不会改变,但是会匹配到特定路径。

{ path: '/', component: Homepage, alias: '/home' },当路径为/及/home时都能访问到Homepage这个组件,且URL不变。

1.2.2 路由组件传参

在组件中使用$route 或useRoute()来获取路径参数,这将使得与路由耦合度更紧密,限制了组件的灵活性,因为它只能用于特定的URL。

可以通过props配置来解除这种行为。在配置路由时,props属性设置为true。

{ path: '/user/:id', component: User, props: true }<!-- User.vue -->
<script setup>
defineProps({id: String
})
</script><template><div>User {{ id }}</div>
</template>

还可以创建一个返回props的函数,将参数转换为其他类型。

{path: '/search',component: SearchUser,props: route => ({ query: route.query.q })}

1.2.3 命名视图

当需要在同级展示多个视图时,可使用命名视图。

<!-- App.vue --><template><router-view class="view left-sidebar" name="LeftSidebar" /><router-view class="view main-content" /><router-view class="view right-sidebar" name="RightSidebar" />
</template>const router = createRouter({history: createWebHashHistory(),routes: [{path: '/',components: {default: Home,LeftSidebar,RightSidebar,},},],
})

图 命名视图

1.2.4 历史记录模式

Hash模式

createWebHashHistory(),它在内部传递的实际URL之前使用了一个哈希字符(#),这使得#后面的URL不会被发送到服务器,所以它不需要在服务器层面上进行任何特殊处理,即可正常访问,但它在SEO中有不好的影响。

例如 http://localhost:8080/#/usr

Memory模式

createMemoryHistory(),不会假定自己处于浏览器环境,因此不会与URL交互也不会自动触发初始导航,不会有历史记录。

HTML5模式

createWebHistory(),需要在服务器上做配置。

例如 http://localhost:8080/usr,如果没适当配置,会得到一个404错误。

表 Vue Router的三种历史模式

相关文章:

Vue Router基础

Router 的作用是在单页应用&#xff08;SPA&#xff09;中将浏览器的URL和用户看到的内容绑定起来。当用户在浏览不同页面时&#xff0c;URL会随之更新&#xff0c;但页面不需要从服务器重新加载。 1 Router 基础 RouterView RouterView 用于渲染当前URL路径对应的路由组件。…...

Apache压测工具ab(Apache Bench)工具的下载安装和使用示例

场景 Jmeter进行http接口压力测试&#xff1a; Jmeter进行http接口压力测试_接口压测两万量-CSDN博客 上面讲压测工具Jmeter的使用&#xff0c;下面介绍另外一个ab(Apache Bench)压测工具的使用。 apache bench apache bench是apache自带的压力测试工具。 ab不仅可以对ap…...

IPIDEA与Python爬虫:联手解锁全球电商数据宝库

IPIDEA与Python爬虫&#xff1a;联手解锁全球电商数据宝库 如何运用代理IP在电商领域进行高效数据采集。特别是在遭遇访问限制的情况下&#xff0c;如何优雅地绕过那些恼人的访问管理机制。当然&#xff0c;在我们的探险之旅中&#xff0c;开源神器PlugLink也将适时出场&#…...

Fine-BI学习笔记

官方学习文档&#xff1a;快速入门指南- FineBI帮助文档 FineBI帮助文档 (fanruan.com) 1.零基础入门 1.1 功能简介 完成四个流程&#xff1a;新建分析主题、添加数据、分析数据、分享协作。 示例数据获取&#xff1a;5分钟上手FineBI - FineBI帮助文档 (fanruan.com) 1.2 …...

AI 辅助编程 Coding AI 辅助研发组织的技术蓝图

简简单单 Online zuozuo:欢迎商业合作 简简单单 Online zuozuo 简简单单 Online zuozuo 简简单单 Online zuozuo 简简单单 Online zuozuo :本心、输入输出、结果 简简单单 Online zuozuo :联系我们:VX :tja6288 / EMAIL: 347969164@qq.com 文章目录 AI 辅助编程 Coding A…...

VScode 批量操作

VScode 批量操作 批量修改 按住 alt/option 键&#xff0c; 选择需要批量操作的位置 如果是多行&#xff0c;则按住 altshift 键 可以直接操作 但是有时候比如变量命名&#xff0c;可能需要递增操作的命名 需要下载插件 Increment Selection 按照1的方法多选光标之后&am…...

【Linux】管道通信和 system V 通信

文章目录 一、进程通信原理&#xff08;让不同进程看到同一份资源&#xff09;二、管道通信2.1 管道原理及其特点2.1 匿名管道和命名管道 三、共享内存通信3.1 共享内存原理3.2 创建和关联共享内存3.3 去关联、ipc 指令和删除共享内存 四、消息队列和信号量&#xff08;了解&am…...

Python | Leetcode Python题解之第279题完全平方数

题目&#xff1a; 题解&#xff1a; class Solution { public:// 判断是否为完全平方数bool isPerfectSquare(int x) {int y sqrt(x);return y * y x;}// 判断是否能表示为 4^k*(8m7)bool checkAnswer4(int x) {while (x % 4 0) {x / 4;}return x % 8 7;}int numSquares(i…...

mysql定时备份

为什么写这篇文章 最近项目里面需要定时备份mysql的数据&#xff0c;网上找了下&#xff0c;找到了一些比较好的解决方案。但是发现有几个地方与自己不匹配&#xff0c;我期望有如下 备份过程不能锁表&#xff0c;网上很多都是会锁表备份定时任务无法执行&#xff0c;但是手动…...

数据结构:逻辑结构与物理结构

逻辑结构与物理结构 逻辑结构1. 集合结构2. 线性结构3. 树形结构4. 图形结构 物理结构1. 顺序存储结构2. 链式存储结构 示例逻辑结构的示例&#xff1a;线性表物理结构的示例 结论 逻辑结构 逻辑结构描述了数据元素之间的逻辑关系&#xff0c;它是数据结构的抽象描述&#xff…...

pycharm报错:No module named pip/No module named pytest

1、问题概述? 今天在执行一个python脚本的时候,控制台提示:No module named pytest,就是没有pytest模块,于是我使用pip命令进行安装,命令如下; pip install pytest 结果又提示No module named pip,说我没有pip模块,没办法,再安装pip 2、安装pip-方式1 在pycharm的T…...

Linux:Linux权限

目录 1. Linux权限的概念 2. Linux权限管理 2.1 文件访问者的分类 2.2 文件类型和访问权限 2.2.1 文件类型 2.2.2 基本权限 2.3 文件权限值的表示方法 2.4 文件访问权限的相关设置方法 2.4.1 chmod 2.4.2 chown 2.4.3 chgrp 2.4.4 umask 3. file指令 4. Linux目…...

新版Glide检测生命周期原理

本文章使用的是glide 4.15.1 public class RequestManagerRetriever implements Handler.Callback {rivate final LifecycleRequestManagerRetriever lifecycleRequestManagerRetriever;public RequestManagerRetriever(Nullable RequestManagerFactory factory, GlideExperim…...

Ansible的脚本-----playbook剧本【上】

目录 1.playbook剧本组成 2.playbook剧本实战演练 2.1 实战演练一&#xff1a;给被管理主机安装httpd服务 2.2 实战演练二&#xff1a;定义、引用变量 2.3 实战演练三&#xff1a;指定远程主机sudo切换用户 2.4 实战演练四&#xff1a;when条件判断 2.5 实战演练五&…...

sql注入学习与防护

一、SQL注入分类 SQL注入根据攻击方式的不同&#xff0c;可以分为以下几种类型&#xff1a; 数字型注入字符型注入报错注入布尔盲注时间盲注联合查询注入基于堆叠的查询注入 二、SQL注入流程 发现注入点猜测字段数确定显示字段获取数据库信息获取数据库中的表获取表中的字段获…...

饥荒dst联机服务器搭建基于Ubuntu

目录 一、服务器配置选择 二、项目 1、下载到服务器 2、解压 3、环境 4、启动面板 一、服务器配置选择 首先服务器配置需要2核心4G&#xff0c;4G内存森林加洞穴大概就占75% 之后进行服务器端口的开放&#xff1a; tcp:8082 tcp:8080 UDP:10888 UDP:10998 UDP:10999 共…...

AtCoder Beginner Contest 363

A - Piling Up 题意 不同的分数段有不同的^数量&#xff0c;Takahashi想要使得他的^数量增加&#xff0c;问他所需要的最少分数增幅。 思路 我们只需要找到下一阶段的下限。 a / 100 是本阶段 1 变成下一阶段&#xff0c;再 * 100变成下限&#xff0c;再与原来的相减即可…...

Protel DXP 面试题详解及参考答案(4万字长文)

解释Protel DXP的基本工作流程。 Protel DXP(现已更名为Altium Designer)是一款用于电子设计自动化(EDA)的软件,主要应用于印刷电路板(PCB)设计。其基本工作流程通常包括以下几个阶段: 项目创建与配置: 开始一个新的设计项目时,首先需要创建一个项目文件,在这个文件…...

雪花算法 集群uid重复问题 uid-generator-spring-boot-starter

1、在生成环境 在某个业务使用该插件生成uid,由于业务整合了 mybatis-plus模块 2、该业务是分部署集群部署以及使用的多线程获取uid&#xff0c;使用中发现唯一建冲突&#xff0c;生成的uid有重复。 然后查看日志发现 workerId 始终为0 怀疑是生成workerId出了问题。 查看跟…...

【AutoDL】AutoDL+Xftp+Xshell+VSCode配合使用教程

身边没有显卡资源或不足以训练模型时&#xff0c;可以租赁服务器的显卡。 1、AutoDL Step :注册账号->选择显卡->选择环境->开机启动 1.1 首先打开AutoDL官网&#xff0c;注册账号 1.2 租赁自己想要的显卡资源 1.3 选择基础环境。 此处&#xff0c;我们让其自动配置…...

C++:std::is_convertible

C++标志库中提供is_convertible,可以测试一种类型是否可以转换为另一只类型: template <class From, class To> struct is_convertible; 使用举例: #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...

MongoDB学习和应用(高效的非关系型数据库)

一丶 MongoDB简介 对于社交类软件的功能&#xff0c;我们需要对它的功能特点进行分析&#xff1a; 数据量会随着用户数增大而增大读多写少价值较低非好友看不到其动态信息地理位置的查询… 针对以上特点进行分析各大存储工具&#xff1a; mysql&#xff1a;关系型数据库&am…...

Go 并发编程基础:通道(Channel)的使用

在 Go 中&#xff0c;Channel 是 Goroutine 之间通信的核心机制。它提供了一个线程安全的通信方式&#xff0c;用于在多个 Goroutine 之间传递数据&#xff0c;从而实现高效的并发编程。 本章将介绍 Channel 的基本概念、用法、缓冲、关闭机制以及 select 的使用。 一、Channel…...

搭建DNS域名解析服务器(正向解析资源文件)

正向解析资源文件 1&#xff09;准备工作 服务端及客户端都关闭安全软件 [rootlocalhost ~]# systemctl stop firewalld [rootlocalhost ~]# setenforce 0 2&#xff09;服务端安装软件&#xff1a;bind 1.配置yum源 [rootlocalhost ~]# cat /etc/yum.repos.d/base.repo [Base…...

如何应对敏捷转型中的团队阻力

应对敏捷转型中的团队阻力需要明确沟通敏捷转型目的、提升团队参与感、提供充分的培训与支持、逐步推进敏捷实践、建立清晰的奖励和反馈机制。其中&#xff0c;明确沟通敏捷转型目的尤为关键&#xff0c;团队成员只有清晰理解转型背后的原因和利益&#xff0c;才能降低对变化的…...

离线语音识别方案分析

随着人工智能技术的不断发展&#xff0c;语音识别技术也得到了广泛的应用&#xff0c;从智能家居到车载系统&#xff0c;语音识别正在改变我们与设备的交互方式。尤其是离线语音识别&#xff0c;由于其在没有网络连接的情况下仍然能提供稳定、准确的语音处理能力&#xff0c;广…...

LLaMA-Factory 微调 Qwen2-VL 进行人脸情感识别(二)

在上一篇文章中,我们详细介绍了如何使用LLaMA-Factory框架对Qwen2-VL大模型进行微调,以实现人脸情感识别的功能。本篇文章将聚焦于微调完成后,如何调用这个模型进行人脸情感识别的具体代码实现,包括详细的步骤和注释。 模型调用步骤 环境准备:确保安装了必要的Python库。…...

ZYNQ学习记录FPGA(一)ZYNQ简介

一、知识准备 1.一些术语,缩写和概念&#xff1a; 1&#xff09;ZYNQ全称&#xff1a;ZYNQ7000 All Pgrammable SoC 2&#xff09;SoC:system on chips(片上系统)&#xff0c;对比集成电路的SoB&#xff08;system on board&#xff09; 3&#xff09;ARM&#xff1a;处理器…...

篇章二 论坛系统——系统设计

目录 2.系统设计 2.1 技术选型 2.2 设计数据库结构 2.2.1 数据库实体 1. 数据库设计 1.1 数据库名: forum db 1.2 表的设计 1.3 编写SQL 2.系统设计 2.1 技术选型 2.2 设计数据库结构 2.2.1 数据库实体 通过需求分析获得概念类并结合业务实现过程中的技术需要&#x…...

【51单片机】4. 模块化编程与LCD1602Debug

1. 什么是模块化编程 传统编程会将所有函数放在main.c中&#xff0c;如果使用的模块多&#xff0c;一个文件内会有很多代码&#xff0c;不利于组织和管理 模块化编程则是将各个模块的代码放在不同的.c文件里&#xff0c;在.h文件里提供外部可调用函数声明&#xff0c;其他.c文…...