零基础Vue入门6——Vue router
本节重点:
- 路由定义
- 路由跳转
前面几节学习的都是单页面的功能(都在专栏里面https://blog.csdn.net/zhanggongzichu/category_12883540.html),涉及到项目研发都是有很多页面的,这里就需要用到路由(vue router)。学习本节之后就可以写一个小型的项目了。
跟着练习一定带你可以上手开发vue项目。
我在gitcode上也建了了对应的vue学习项目,会跟随我的专栏进行定期代码更新,有需要可以克隆下载GitCode - 全球开发者的开源社区,开源代码托管平台
Vue Router
Vue Router 是 Vue.js 的官方路由。功能包括:
- 路由跳转、传参、查询、通配符
- 嵌套路由
- 动态路由
- 路由切换过滤效果
- HTML5 history 模式或 hash 模式
- .......
入门项目开发,可以先从掌握基础的路由跳转开始。
浏览器url上 / 之后的就是页面路由,?后面的就是页面传递的参数,多层的/就是嵌套路由的概念。例如:
所谓客户端路由,就是把你应用中的页面和浏览器的URL绑定起来,实现:
用户浏览不同页面——URL更新——组件更新。
通过配置路由来告诉 Vue Router 为每个 URL 路径显示哪些组件。
例如下面的例子,有3个页面通过一个导航来切换不同的页面。
路由定义
想要实现上述效果,第一步创建一个路由实例,在你项目的src目录下面新建router文件夹,之后新建一个index.ts文件。
import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/views/home/index.vue'const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{path: '/',name: 'index',redirect: '/home',},{path: "/home",name: "home",component: Home,children: [{path: 'homeLayout',name: '首页',component: () => import('@/views/home/HomeView.vue')},{path: 'vue01',name: '第一节',component: () => import('@/views/vue01/index.vue')},{path: 'vue02',name: '第二节',component: () => import('@/views/vue02/index.vue')}]}],
})export default router
上面就定义了一个嵌套路由,/home就是项目的入口文件,/home/homeLayout就是首页,以此类推。其中:
-
routes
选项定义了一组路由,把 URL 路径映射到组件 component
参数指定要渲染的组件- 在main.ts中注册路由
- 在
App.vue
中添加路由渲染容器组件<RouterView>
渲染
这些路由组件通常被称为视图,本质上它们只是普通的 Vue 组件。
路由的不同历史模式
- Hash模式:用
createWebHashHistory()
创建, URL 之前使用了一个井号(#
) - HTML5模式:用
createWebHistory()
创建 ,URL 会看起来很 "正常",官网也比较推荐这种模式。
路由访问
在首页定义了一个导航
- 导航跳转(也就是声明式路由)可以使用routerLink组件的to属性定义
- 通过方法跳转(也就是编程式路由)的话可以使用router.push('对应的路由url')方法实现
<template><div class="ln_container"><nav><RouterLink v-for="item in menu" :to="item.path">{{ item.name }}</RouterLink></nav><div class="ln_main"><RouterView /></div></div>
</template><script setup lang="ts">
import { RouterLink, RouterView,useRouter } from 'vue-router';
import { ref,watch } from 'vue';const menu = ref([{name: '首页',path: '/',},{name: 'vue01',path: '/home/vue01',}, {name: 'vue02',path: '/home/vue02',},
]);const router = useRouter();
// 监听路由变化,如果跳转到/home,则跳转到/home/homeLayout
watch(() => router.currentRoute.value.path, (to) => {if (to === '/home') {router.push('/home/homeLayout');}
}, { immediate: true });</script><style scoped lang="scss">
.ln_container {width: 100%;height: 100%;nav {display: flex;padding: 10px;font-size: 16px;border-bottom: 1px solid #e0e0e0;margin-bottom: 10px;a {display: inline-block;padding: 10px;line-height: 20px;text-decoration: none;color: #333333;&:hover{background-color: #f0f0f0;}}}
}nav a:first-of-type {border: 0;
}.ln_main {padding: 10px;
}
</style>
通过 useRouter()
和 useRoute()
来访问路由器实例和当前路由。
常用api
重定向 redirect
const routes = [{ path: '/home', redirect: { name: 'homepage' } }]
路由传参params
// 定义
const routes = [{ path: '/users/:id', component: User },
];// 使用<template><div>User {{ router.params.id }}</div>
</template>
导航守卫
简单项目基本这些就够用了,项目要求比较高的话,例如需要检查用户是否已经登录,没有登录的需要先跳转到登录页等等权限方面的需求的,就需要用到导航守卫了。
router.beforeEach(async (to, from) => {if (// 检查用户是否已登录!isAuthenticated &&// ❗️ 避免无限重定向to.name !== 'Login') {// 将用户重定向到登录页面return { name: 'Login' }}})
更多路由导航学习:导航守卫 | Vue Router
路由切换过渡效果:过渡动效 | Vue Router
404页面
如果客户在浏览器上写了一个没有对应路由的url,怎么显示呢?可以提供一个默认的没找到的页面,匹配所有未找到路径的页面。
const router = createRouter({history: createWebHistory(),routes: [{...},// 正常的路由页面{ path: '/:pathMatch(.*)', // 未匹配的页面component: NotFoundComponent }
],
})
以上就是全部内容了。
若碰到其他的问题 可以私信我 一起探讨学习
如果对你有所帮助还请 点赞
收藏 谢谢~!
关注收藏博客 持续更新中。
从零开始轻松掌握Vue.js,欢迎订阅我的博客专栏!https://blog.csdn.net/zhanggongzichu/category_12883540.html?utm_medium=notify.im.notify-business-fans.20250124.a&username=zhanggongzichu
相关文章:
零基础Vue入门6——Vue router
本节重点: 路由定义路由跳转 前面几节学习的都是单页面的功能(都在专栏里面https://blog.csdn.net/zhanggongzichu/category_12883540.html),涉及到项目研发都是有很多页面的,这里就需要用到路由(vue route…...
【疑海破局】一个注解引发的线上事故
【疑海破局】一个注解引发的线上事故 1、问题背景 在不久前一个阳光明媚的上午,我的思绪正在代码中游走、双手正在键盘上飞舞。突然,公司内部通讯工具上,我被拉进了一个临时工作群,只见群中产品、运营、运维、测试等关键人员全部严阵以待,我就知道大的可能要来了。果不其…...
C语言:函数栈帧的创建和销毁
目录 1.什么是函数栈帧2.理解函数栈帧能解决什么问题3.函数栈帧的创建和销毁的过程解析3.1 什么是栈3.2 认识相关寄存器和汇编指令3.3 解析函数栈帧的创建和销毁过程3.3.1 准备环境3.3.2 函数的调用堆栈3.3.3 转到反汇编3.3.4 函数栈帧的创建和销毁 1.什么是函数栈帧 在写C语言…...
IDEA启动项目慢问题处理
IDEA启动项目慢问题处理 一、问题现象二、问题排查排查点1:idea内存排查点2:应用内存排查点3:shorten command lineclasspath filejar manifest 排查点4:jstack排查 三、问题定位 一、问题现象 多模块工程,启动模块为…...
Denavit-Hartenberg DH MDH坐标系
Denavit-Hartenberg坐标系及其规则详解 6轴协作机器人的MDH模型详细图_6轴mdh-CSDN博客 N轴机械臂的MDH正向建模,及python算法_mdh建模-CSDN博客 运动学3-----正向运动学 | 鱼香ROS 机器人学:MDH建模 - 哆啦美 - 博客园 机械臂学习——标准DH法和改进MDH…...
Unity 快速入门 1 - 界面操作
本项目将快速介绍 Unity 6的基本操作和功能,下载附件的项目,解压到硬盘,例如 D:\Unity Projects\, 注意整个文件路径中只有英文、空格或数字,不要有中文或其他特殊符合。 1. 打开Unity Hub,点击右上角的 O…...
美国网络司令部军事网络指挥框架战略转型与挑战分析
文章目录 前言一、框架核心内容:从分散到集中,构建标准化作战体系二、指挥体系重构:权责明晰与集中化管控三、风险管理创新:从被动防御到主动备战四、对美军网络作战的影响总结 前言 2024年9月,美国网络司令部发布《国…...
9-收纳的知识
[ComponentOf(typeof(xxx))]组件描述,表示是哪个实体的组件 [EntitySystemOf(typeof(xxx))] 系统描述 [Event(SceneType.Demo)] 定义事件,在指定场景的指定事件发生后触发 [ChildOf(typeof(ComputersComponent))] 标明是谁的子实体 [ResponseType(na…...
Linux 压缩打包
Linux压缩打包 文章目录 Linux压缩打包压缩的意义和原理压缩的意义压缩的原理压缩与解压缩的好处压缩打包命令.zipzip 命令用法unzip 的用法.gzgzip 的用法gunzip 的用法.bz2bzip2 的用法bunzip2 的用法.xzxz 命令用法tar04-Linux压缩打包课后习题压缩的意义和原理 压缩的意义…...
排序算法--堆排序
堆排序是一种高效的排序算法,适合大规模数据排序,尤其适用于需要实时获取最大(或最小)值的场景。 // 交换两个元素的值 void swap(int* a, int* b) {int temp *a;*a *b;*b temp; }// 调整堆,使其满足堆的性质 void …...
51c视觉~CV~合集10
我自己的原文哦~ https://blog.51cto.com/whaosoft/13241694 一、CV创建自定义图像滤镜 热图滤镜 这组滤镜提供了各种不同的艺术和风格化光学图像捕捉方法。例如,热滤镜会将图像转换为“热图”,而卡通滤镜则提供生动的图像,这些图像看起来…...
【数据结构】(6) LinkedList 链表
一、什么是链表 1、链表与顺序表对比 不同点LinkedListArrayList物理存储上不连续连续随机访问效率O(N)O(1)插入、删除效率O(1)O(N) 3、链表的分类 链表根据结构分类,可分为单向/双向、无头结点/有头节点、非循环/循环链表,这三组每组各取…...
使用 Axios 获取用户数据并渲染——个人信息设置
目录 1. HTML 部分(前端页面结构) HTML 结构解析: 2. JavaScript 部分(信息渲染逻辑) JavaScript 解析: 3. 完整流程 4. 总结 5. 适用场景 本文将介绍如何通过 Axios 从服务器获取用户信息࿰…...
【hudi】基于hive2.1.1的编译hudi-1.0.0源码
hudi版本1.0.0 需要使用较低版本的hive,编译hudi只需要修改下类即可: org.apache.hudi.hadoop.hive.HoodieCombineHiveInputFormat 一、复制org.apache.hadoop.hive.common.StringInternUtils 找个hive2.3.9的源码包,创建包路径,…...
物联网领域的MQTT协议,优势和应用场景
MQTT(Message Queuing Telemetry Transport)作为轻量级发布/订阅协议,凭借其低带宽消耗、低功耗与高扩展性,已成为物联网通信的事实标准。其核心优势包括:基于TCP/IP的异步通信机制、支持QoS(服务质量&…...
MyBatis 调优指南:释放持久层性能潜力
MyBatis 作为一款优秀的持久层框架,以其灵活性和易用性深受开发者喜爱。然而,随着应用规模扩大和数据量增长,MyBatis 的性能问题也逐渐显现。本文将深入探讨 MyBatis 调优策略,帮助您释放持久层性能潜力。 一、 SQL 语句优化 避免…...
Unity扩展编辑器使用整理(一)
准备工作 在Unity工程中新建Editor文件夹存放编辑器脚本, Unity中其他的特殊文件夹可以参考官方文档链接,如下: Unity - 手册:保留文件夹名称参考 (unity3d.com) 一、菜单栏扩展 1.增加顶部菜单栏选项 使用MenuItemÿ…...
注册中心不知选哪个?Zookeeper、Eureka、Nacos、Consul和Etcd 5种全方位剖析对比
本文给大家讲解 5 种常用的注册中心,对比其流程和原理,无论是面试还是技术选型,都非常有帮助。 对于注册中心,在写这篇文章前,我其实只对 ETCD 有比较深入的了解,但是对于 Zookeeper 和其他的注册中心了解甚…...
Windows下怎么安装FFFmpeg呢?
在Windows下使用Open-webui报错,说Couldnt find ffmpeg or avconv,解决open-webui报错Couldn‘t find ffmpeg or avconv-CSDN博客于是尝试解决问题,那么Windows下怎么安装FFFmpeg呢? 尝试了两种方法。 第一种方法pip安装(失败&…...
CSS 基础:层叠、优先级与继承
CSS 基础:层叠、优先级与继承 一、层叠(Cascade)示例:层叠的顺序 二、优先级(Specificity)优先级规则示例:优先级的比较 三、继承(Inheritance)哪些属性会被继承…...
《翻转组件库之发布》
背景 继《翻转组件库之打包》_杨晓风-linda的博客-CSDN博客之后,组件库已经可以正常构建,那如何像elementUI等组件库那样,用npm安装,按照既定的用法使用即可呢?本篇便为你揭晓 资料相关 1、npm官方文档:…...
Spring Boot + Spring AI快速体验
Spring AI快速体验 1 什么是Spring AI 主要功能 2 快速开始 2.1 版本说明2.2 配置文件2.3 pom依赖 2.3.1 spring maven仓库2.3.2 核心依赖 2.4 定义ChatClient2.5 启动类2.6 测试 3 参考链接 1 什么是Spring AI Spring AI是Spring的一个子项目,是Spring专门面向于…...
windows linux常用基础命令
windows基础命令 cd …/ (访问D盘 直接D: 进入目录cd…\baidudu) color 2 改变颜色 dir 浏览当前目录中有什么内容 例如 dir windows可以浏览windows中有什么文件 cls 清屏 cd windows 可以跳转到c盘目录的下面 cd…/可以返回到上一级目录 ./当前目录 cd \ 直…...
ZooKeeper单节点详细部署流程
ZooKeeper单节点详细部署流程 文章目录 ZooKeeper单节点详细部署流程 一.下载稳定版本**ZooKeeper**二进制安装包二.安装并启动**ZooKeeper**1.安装**ZooKeeper**2.配置并启动**ZooKeeper** ZooKeeper 版本与 JDK 兼容性3.检查启动状态4.配置环境变量 三.可视化工具管理**Zooke…...
【AI日记】25.02.06
【AI论文解读】【AI知识点】【AI小项目】【AI战略思考】【AI日记】【读书与思考】 AI kaggle 比赛:Backpack Prediction Challenge 读书 书名:理解公司:产权、激励与治理作者:张维迎下图感想:哲学家、思想家比如卢梭…...
税费学习之:附加税费
好的!我将从 **税收本质、历史沿革、用途逻辑、企业影响** 四个维度综合分析,用项目管理中的实际场景说明为什么需要缴纳附加税费。 --- ### **一、附加税费的本质与构成** #### **1. 定义** 附加税费是 **以增值税、消费税为基数征收的附加税**&…...
数据库开发常识(10.6)——SQL性能判断标准及索引误区(1)
10.6. 数据库开发常识 作为一名专业数据库开发人员,不但需要掌握数据库开发相关的语法和功能实现,还要掌握专业数据库开发的常识。这样,才能在保量完成工作任务的同时,也保质的完成工作任务,避免了为应用的日后维护埋下性能和稳定性方面的隐患。可遗憾的是,现实中,很大…...
网络原理一>数据链路层协议->以太网协议
目录 以太网协议的结构:类型:ARP请求应答报文:CRC:MTU: 为什么需要mac地址:mac地址和IP地址的区别: 以太网协议的结构: 以太网是数据链路层和物理层的主要协议 源IP,目的IP就不多说…...
Android 约束布局ConstraintLayout整体链式打包居中显示
Android 用约束布局ConstraintLayout实现将多个控件视作一个整体居中显示,使用 app:layout_constraintHorizontal_chainStyle"packed"实现 chain 除了链条方向有横向和竖向区分外, chain链条上的模式有 3种 spread - 元素将被展开&#…...
云计算行业分析
云计算作为数字经济的核心基础设施,未来十年将持续重塑全球科技格局,并渗透到几乎所有行业的数字化转型中。 一、云计算的发展潜力 1. 技术融合驱动爆发式创新 AI与云计算的深度耦合 - **智能云服务**:云厂商将提供预训练模型、自动化ML工…...
深入浅出DeepSeek LLM 以长远主义拓展开源语言模型
深入浅出地讲解DeepSeek LLM 以长远主义拓展开源语言模型 🌟 1. 什么是 DeepSeek LLM? 大家想象一下,你在游戏里要打造一个超级英雄角色,选择最强的装备、技能点和升级策略。那么,DeepSeek LLM 就是 AI 界的“超级英雄…...
用Python获取股票数据并实现未来收盘价的预测
获取数据 先用下面这段代码获取上证指数的历史数据,得到的csv文件数据,为后面训练模型用的 import akshare as ak import pandas as pd# 获取上证指数历史数据 df ak.stock_zh_index_daily(symbol"sh000001")# 将数据保存到本地CSV文件 df.…...
[openwrt]openwrt slaac only模式下部分终端无法获取到IPv6 DNS
问题描述 OpenWrt 中,如果启用了 RA 单播(ra_unicast),但部分终端无法获取到 DNS 信息 问题分析 RA 单播的局限性 并非所有终端都完全支持通过单播接收 RA 消息。部分终端可能无法正确解析单播 RA 中的 RDNSS(Recursive DNS Server)选项,从而导致无法获取 DNS 信息。终…...
【redis】数据类型之list
Redis的List数据类型是一个双向链表,支持在链表的头部(left)和尾部(right)进行元素的插入(push)和弹出(pop)操作。这使得List既可以用作栈(stack)…...
电脑连接wifi但是浏览器打开不了网页,使用手机热点能正常使用
电脑连接wifi但是浏览器打开不了网页,使用手机热点能正常使用 打开控制面板 打开网络和Internet(查看网络状态和任务) 点击更改适配器设置 双击WLAN 点击属性并双击打开Internet 协议版本4(TCP/IPv4) 将自动…...
el-table中的某个字段最多显示两行,超出部分显示“...详情”,怎么办
文章目录 背景需求需求分析 解决方案在线体验灵感来源我的实现方案 总结 背景 需求 比如,有如下一个表格,请你实现它: 要求: 最多显示两行超出部分显示为:“…详情”点击详情,展开全部内容 说明&#x…...
Vue el-input密码输入框 按住显示密码,松开显示*;阻止浏览器密码回填,自写密码输入框;校验输入非汉字内容;文本框聚焦到内容末尾;
输入框功能集合 <template><div style"padding: 10px"><!-- 密码输入框 --><el-input:type"inputType"v-model"password"placeholder"请输入密码"auto-complete"new-password"id"pwd"style…...
尚硅谷课程【笔记】——大数据之Shell【一】
课程视频:【【尚硅谷】Shell脚本从入门到实战】 一、Shell概述 为什么要学习Shell? 1)需要看懂运维人员的Shell程序 2)偶尔编写一些简单的Shell程序来管理集群、提高开发效率 什么是Shell? 1)Shell是一…...
4年测试|20-30K|金山办公|大模型测开3轮面经
一面时间:面试时长一小时左右 二面时间:面试时长基本满一小时 HR面时间:面试流程上全部结束了,内容如下: 前言: 岗位:自己想投递base珠海,金山办公的HR捞了下。why choose Zhuha…...
【负载均衡式在线OJ】实现负载均衡
目录 管理服务器 增加负载 && 减少负载 重置负载 && 获得负载 负载均衡 添加配置信息 什么是负载均衡 如何实现? 管理服务器 增加负载 && 减少负载 客户端访问一次服务器,负载就加1。客户端结束访问服务器,…...
网络安全-防御 第一次作业(由于防火墙只成功启动了一次未补截图)
防火墙安全策略课堂实验报告 一、拓扑 本实验拓扑包含预启动设备、DMZ区域(含OA Server和Web Server)、防火墙(FW1)、Trust区域(含办公区PC和生产区PC)等。具体IP地址及连接关系如给定拓扑图所示…...
大数据挖掘--两个角度理解相似度计算理论
文章目录 0 相似度计算可以转换成什么问题1 集合相似度的应用1.1 集合相似度1.1文档相似度1.2 协同过滤用户-用户协同过滤物品-物品协同过滤 1.2 文档的shingling--将文档表示成集合1.2.1 k-shingling1.2.2 基于停用词的 shingling 1.3 最小哈希签名1.4 局部敏感哈希算法&#…...
【Mybatis Plus】JSqlParser解析sql语句
【Mybatis Plus】JSqlParser解析sql语句 【一】JSqlParser 是什么【二】JSqlParser 的安装步骤【三】使用场景【1】sql语句解析【2】SQL 语句转换【3】SQL 语句生成【4】SQL 语句验证 【四】在使用 JSqlParser 时,如何处理 SQL 注入攻击?【1】使用预编译…...
vue3 + ElementPlus 封装列表表格组件包含分页
在前端开发中,封装组件是必不可少的。今天就来封装一个通用的列表表格组件,包含分页功能,可以提高代码的复用性和可维护性。 1. 组件设计 Props: tableData:表格数据。columns:表格列配置。totalÿ…...
springboot3整合knife4j详细版,包会!(不带swagger2玩)
1. 引入依赖 <dependency><groupId>com.github.xiaoymin</groupId><artifactId>knife4j-openapi3-jakarta-spring-boot-starter</artifactId><version>4.4.0</version> </dependency>2. 配置文件 简短必要版 # 配置springd…...
Vue2自定义指令实现优雅的前端埋点方案
背景介绍 在前端开发中,埋点是一个非常常见的需求。通常我们需要记录用户的操作行为,以便于后续的数据分析和问题排查。传统的埋点方式往往是在每个需要埋点的地方都写一段上报代码,这样不仅代码重复度高,而且维护起来也比较麻烦…...
1.攻防世界 题目名称-文件包含
进入题目页面如下 直接给出了源码进行代码审计 题目给出提示是文件包含的题 代码审计 <?php // 高亮显示当前 PHP 文件的源代码,方便查看和调试 highlight_file(__FILE__);// 包含名为 "check.php" 的文件,通常这个文件中可能包含一些用…...
Ruby Dir 类和方法详解
Ruby Dir 类和方法详解 引言 在Ruby编程语言中,Dir类是一个非常有用的工具,它允许我们与文件系统进行交互,如列出目录内容、检查文件是否存在等。Dir类提供了多种方法,使得文件系统的操作变得简单且高效。本文将详细介绍Ruby中的…...
axios 发起 post请求 json 需要传入数据格式
• 1. axios 发起 post请求 json 传入数据格式 • 2. axios get请求 1. axios 发起 post请求 json 传入数据格式 使用 axios 发起 POST 请求并以 JSON 格式传递数据是前端开发中常见的操作。 下面是一个简单的示例,展示如何使用 axios 向服务器发送包含 JSON 数…...
Windows编程:下载与安装 Visual Studio 2010
本节前言 在写作本节的时候,本来呢,我正在写的专栏,是 MFC 专栏。而 VS2010 和 VS2019,正是 MFC 学习与开发中,可以使用的两款软件。然而呢,如果你去学习 Windows API 知识的话,那么࿰…...