vue3路由基本使用
在 Vue 3 中,路由指的是应用程序的导航系统,允许你在不同的视图或页面之间进行切换。通过 vue-router 插件,你可以定义路由规则,将 URL 路径映射到 Vue 组件,实现页面间的跳转和状态管理。使用路由,用户可以在应用中导航不同的视图,同时保持浏览器的历史记录。
一 路由的基本使用
1. 安装 vue-router
npm install vue-router@next
2. 创建路由配置
定义路由配置通常在一个单独的文件中完成,例如 router/index.js 或 router/index.ts。配置包括路径、组件和其他路由属性:
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';const routes = [{path: '/',name: 'Home',component: Home},{path: '/about',name: 'About',component: About}
];const router = createRouter({history: createWebHistory(),routes
});export default router;
3. 在应用中使用路由
在你的 Vue 应用中,通常会在 main.js 或 main.ts 中使用 router 实例:
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';const app = createApp(App);
app.use(router);
app.mount('#app');
4. 路由视图
使用 组件在你的模板中展示路由匹配的组件。这个组件充当路由占位符:
<script lang="ts" setup name="App">import {RouterLink,RouterView} from 'vue-router'
</script>
<template><div><router-view></router-view></div><RouterLink to="/home" active-class="active">首页</RouterLink>
</template>
5 命名路由
命名路由允许你为每个路由定义一个唯一的名称,方便在应用中引用和导航。定义命名路由时,你可以在路由配置中为每个路由指定一个 name 属性
- 在路由配置中为每个路由指定 name 属性:
const routes = [{path: '/home',name: 'Home',component: HomeComponent},{path: '/about',name: 'About',component: AboutComponent}
];
- 使用 组件时,可以通过 :to 属性的对象形式来引用命名路由:
<router-link :to="{ name: 'Home' }">Home</router-link>
<router-link :to="{ name: 'About' }">About</router-link>
- 编程式导航
import { useRouter } from 'vue-router';export default {setup() {const router = useRouter();function goToHome() {router.push({ name: 'Home' });}return { goToHome };}
};
- 带参数的命名路由
当路由需要参数时,可以在 :to 对象中添加 params 属性:
<router-link :to="{ name: 'UserProfile', params: { id: 123 } }">User Profile</router-link>
编程式导航时也可以传递参数:
router.push({ name: 'UserProfile', params: { id: 123 } });
6 嵌套路由
嵌套路由允许你在一个路由中定义子路由,从而构建层级结构的页面。这样可以在一个页面内展示多个视图或组件。
- 定义嵌套路由
在路由配置中,将子路由定义在父路由的 children 属性下:
const routes = [{path: '/dashboard',component: DashboardLayout,children: [{path: '',name: 'DashboardHome',component: DashboardHome},{path: 'settings',name: 'DashboardSettings',component: DashboardSettings}]}
];
7 路由重定向
路由重定向的作用是自动将用户从一个路径引导到另一个路径。它可以用于以下几种情况:
- 默认路径:例如,将根路径 / 重定向到主页 /home。
{path:'/',redirect:'/about'
}
- 旧路径更新:将旧的或过时的路径重定向到新的路径,以保持链接的有效性。
- 权限控制:将用户重定向到登录页面,如果他们尝试访问受限区域而未登录。
二 路由的操作
1. 导入 useRouter 和 useRoute
在 Vue 3 中,你需要从 vue-router 导入 useRouter 和 useRoute,这两个函数提供了对路由实例和当前路由信息的访问。
import { useRouter, useRoute } from 'vue-router';
2. 进行路由导航
使用 useRouter 来执行路由导航操作。例如,你可以在组件中定义方法来进行导航:
export default {setup() {const router = useRouter();function goToHome() {router.push('/');}function goToUserProfile(userId) {router.push({ name: 'user-profile', params: { id: userId } });}return { goToHome, goToUserProfile };}
};
3. 访问当前路由信息
使用 useRoute 来访问当前路由的信息,如路径、查询参数和动态路由参数:
export default {setup() {const route = useRoute();console.log(route.path); // 当前路由的路径console.log(route.params.id); // 动态路由参数console.log(route.query.search); // 查询参数return { route };}
};
4. 路由守卫
你可以在 setup 函数中使用 onBeforeRouteEnter 和 onBeforeRouteUpdate 进行路由守卫:
import { onBeforeRouteEnter, onBeforeRouteUpdate } from 'vue-router';export default {setup() {onBeforeRouteEnter((to, from, next) => {// 在路由进入之前执行的逻辑if (/* 条件 */) {next();} else {next('/login');}});onBeforeRouteUpdate((to, from, next) => {// 在路由更新之前执行的逻辑if (/* 条件 */) {next();} else {next('/error');}});}
};
5. 使用路由钩子
你可以在 setup 函数中使用 Vue 的生命周期钩子来处理路由相关的逻辑:
import { onMounted } from 'vue';
import { useRoute } from 'vue-router';export default {setup() {const route = useRoute();onMounted(() => {console.log('Current route path:', route.path);// 处理路由信息});return { route };}
};
6. 监听路由变化
使用 watch API 监听路由变化并响应:
import { watch } from 'vue';
import { useRoute } from 'vue-router';export default {setup() {const route = useRoute();watch(() => route.params.id,(newId, oldId) => {console.log(`Route parameter ID changed from ${oldId} to ${newId}`);// 执行需要根据路由变化更新的逻辑});return { route };}
};
7. 路由懒加载
通过懒加载组件来提高应用的性能:
const UserProfile = () => import('../components/UserProfile.vue');const routes = [{path: '/user/:id',name: 'user-profile',component: UserProfile}
];
8. 使用路由元信息
路由元信息可以用于存储额外的信息,例如权限检查:
const routes = [{path: '/admin',component: AdminComponent,meta: { requiresAuth: true }}
];// 在路由守卫中检查元信息
import { onBeforeRouteEnter } from 'vue-router';export default {setup() {onBeforeRouteEnter((to, from, next) => {if (to.meta.requiresAuth && !isAuthenticated()) {next('/login');} else {next();}});}
};
三 路由的两种工作模式
1 history
模式
- 工作原理
history
模式利用 HTML5 的 History API (pushState, replaceState, 和 popState 事件) 来管理路由。浏览器的 URL 不包含 # 符号,而是直接显示路由的路径部分。需要对服务器进行配置,以确保所有路由请求都返回应用的入口 HTML 文件。
- 优点
- 更清晰的 URL:没有 # 符号,URL 更加整洁和符合标准。
- 支持更复杂的功能:支持浏览器的前进、后退功能,与传统的浏览器行为一致。
- 缺点
- 需要服务器配置:必须配置服务器以处理路由,避免 404 错误。
- 示例
import { createRouter, createWebHistory } from 'vue-router';const routes = [{ path: '/', component: Home },{ path: '/about', component: About },
];const router = createRouter({history: createWebHistory(),routes,
});export default router;
5 URL 示例
- 首页:http://example.com/
- 关于页:http://example.com/about
2 hash
模式
- 工作原理
哈希模式使用 URL 的 # 符号后面的部分来表示路由状态。浏览器不会将 # 后面的部分发送到服务器,所有的路由切换都在客户端完成。
- 优点
- 兼容性:几乎所有浏览器都支持哈希模式,且不需要额外的服务器配置。
- 简单:无需配置服务器即可处理路由。
- 缺点
- URL 显得不美观:URL 中包含 # 符号,这可能会影响用户体验和 SEO。
- 某些功能限制:如部分工具或库可能对哈希 URL 的支持较差。
- 示例
import { createRouter, createWebHashHistory } from 'vue-router';const routes = [{ path: '/', component: Home },{ path: '/about', component: About },
];const router = createRouter({history: createWebHashHistory(),routes,
});export default router;
- URL 示例
首页:http://example.com/#/
关于页:http://example.com/#/about
四 路由传参
1 query参数
- 定义路由
Query 参数不需要在路由定义中做特别设置:
// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Search from '@/components/Search.vue';const routes = [{path: '/search',component: Search}
];const router = createRouter({history: createWebHistory(),routes
});export default router;
- 访问 Query 参数
在组件中,使用 useRoute 来访问查询参数:
<template><div><h1>Search Query: {{ query }}</h1></div>
</template><script>
import { computed } from 'vue';
import { useRoute } from 'vue-router';export default {setup() {const route = useRoute();const query = computed(() => route.query.q);return { query };}
}
</script>
- 路由跳转
使用 useRouter 进行跳转并传递查询参数:
<template><button @click="search('vue')">Search for Vue</button>
</template><script>
import { useRouter } from 'vue-router';export default {setup() {const router = useRouter();function search(query) {router.push({ path: '/search', query: { q: query } });}return { search };}
}
</script>
2 params参数
- 定义路由
首先,设置带有路径参数的路由:
// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import User from '@/components/User.vue';const routes = [{path: '/user/:id',component: User}
];const router = createRouter({history: createWebHistory(),routes
});export default router;
- 访问 Path 参数
在组件中,使用 useRoute 来访问路径参数:
<template><div><h1>User ID: {{ userId }}</h1></div>
</template><script>
import { computed } from 'vue';
import { useRoute } from 'vue-router';export default {setup() {const route = useRoute();const userId = computed(() => route.params.id);return { userId };}
}
</script>
- 路由跳转
使用 useRouter 进行跳转并传递路径参数:
<template><button @click="goToUser(123)">Go to User 123</button>
</template><script>
import { useRouter } from 'vue-router';export default {setup() {const router = useRouter();function goToUser(id) {router.push(`/user/${id}`);}return { goToUser };}
}
</script>
- 总结
params
参数 是在路由路径中定义的动态部分(如 /user/:id),在 URL 中直接显示,通常用于标识资源的唯一性。在组件中,通过 useRoute 访问 route.params 来获取这些参数。
query
参数 是附加在 URL 末尾的键值对(如 /search?q=vue),用于传递额外的过滤或搜索条件。在组件中,通过 useRoute 访问 route.query 来获取这些参数。
相关文章:
vue3路由基本使用
在 Vue 3 中,路由指的是应用程序的导航系统,允许你在不同的视图或页面之间进行切换。通过 vue-router 插件,你可以定义路由规则,将 URL 路径映射到 Vue 组件,实现页面间的跳转和状态管理。使用路由,用户可以…...
哪些人适合学习人工智能?
人工智能(AI)的浪潮正席卷全球,它不仅是科技领域的一场革命,更是社会进步的重要推手。随着AI技术的不断成熟和应用领域的不断拓展,越来越多的人开始关注并渴望掌握这一前沿技术。那么,究竟哪些人适合学习人…...

计算机的错误计算(九十七)
摘要 讨论 的计算精度问题。 由计算机的错误计算(九十六)知,IEEE754-2019标准中含有 运算。 另外,似乎没有语言直接编程实现内置了该运算。 例1. 已知 x-0.9999999999076 . 计算 不妨用 Python的 math库与 numpy库中的 …...

Flask-Migrate的使用
组织一个 Flask 项目通常需要遵循一定的结构,以便代码清晰、可维护。下面是一个典型的 Flask 项目结构: my_flask_app/ │ ├── app/ │ ├── __init__.py │ ├── models.py │ ├── views.py │ ├── forms.py │ ├── templat…...

python怎么输入整数
使用input()函数输入一个整数: ainput(“请输入一个整数\n”) 结果却报错TypeError: str object cannot be interpreted as an integer 查阅文档发现input()函数返回值是str型。 我们只需要这样转换: aint(input("请输入一…...
代码随想录打卡Day36
今天做的头皮发麻,除了第一道题是自己AC的,剩下两道题目都是看视频才AC的,主要是看了视频也花了很久时间才想清楚。 1049. 最后一块石头的重量 II 这道题一开始没什么思路,但是看到提示说和昨天的分割子集很像,然后我…...
速盾:凡科建站开cdn了吗?
凡科建站是一家专业的建站平台,提供了多种功能和工具来帮助用户快速搭建自己的网站。随着互联网技术的不断发展,网站的访问速度和稳定性成为了越来越重要的考虑因素。为了优化用户体验,提高网站的加载速度,凡科建站已经开启了CDN&…...

python贪吃蛇游戏项目源码【免费】
使用Pygame库实现的贪吃蛇游戏。Pygame是一个用于创建视频游戏的Python模块集合,它提供了图形和声音库,使游戏开发变得容易。 初始化设置 屏幕大小 (SCREEN_WIDTH, SCREEN_HEIGHT): 定义了游戏窗口的宽度和高度。方格大小 (SIZE): 定义了游戏中每个小方…...

Mycat搭建分库分表
分库分表解决的问题 单表数据量过大带来的性能和存储容量的限制的问题: 索引效率下降读写瓶颈存储容量限制事务性能问题分库分表架构 再搭建一对主从复制节点,3307主节点,3309从节点配置数据源 dw1 , dr1,创建集群c1创建逻辑库 CREATE DATAB…...
Python中的数据结构
1.列表 可以将列表理解为一个购物清单,这个清单里面的的每个元素可以是任何类型,并且可以重复(这里区别了列表与数组)。列表用“[]”表示。 #这里定义了一个列表,列表中的元素的类型不同。 lsit_a [a, b, c, 1, 2] …...

mysql笔记8(多表查询)
文章目录 1. union联合查询可能会用到去重操作 2. inner join 内连接3. left join 左连接4. right join 右连接5. cross join 交叉连接6. natural join 自然连接natural left join 自然左连接natural right join 自然右连接自然连接的两张表没有同名字段怎么办? 7. …...
typescript-tsconfig文件解释
ts.config.json 作用 用于标识 TypeScript 项目的根路径用于配置 TypeScript 编译器用于指定编译的文件 重要字段 files - 设置要编译的文件的名称;include - 设置需要进行编译的文件,支持路径模式匹配;exclude - 设置无需进行编译的文件…...
所有用贪心的算法和所有用动态规划(dp)的算法合集
贪心 纯贪心算法(常在普及组中做暴力题正解使用)DijkstraBFS(最短路径)KruskalPrimSollin(Boruvka)二分三分最值排序LCA(纯贪心版) 动态规划(dp) Floyd线性DP区间DP背…...
论文阅读 | 基于流模型和可逆噪声层的鲁棒水印框架(AAAI 2023)
Flow-based Robust Watermarking with Invertible Noise Layer for Black-box DistortionsAAAI, 2023,新加坡国立大学&中国科学技术大学本论文提出一种基于流的鲁棒数字水印框架,该框架采用了可逆噪声层来抵御黑盒失真。 一、问题 基于深度神经网络…...

上线跨境电商商城的步骤
上线一个跨境电商商城涉及多个步骤,从前期准备到上线后的维护。以下是一些关键步骤: 1. 市场调研与规划 目标市场分析:研究目标市场的需求、竞争对手和消费者行为。法律法规:了解并遵守目标市场的法律法规,包括税收、…...

Python基础(七)——PyEcharts数据分析(面向对象版)
四、使用PyEcharts数据分析案例(面向对象版) 【前言:为了巩固之前的Python基础知识(一)到(五),并为后续使用Python作为数据处理的好帮手,我们一起来用面向对象的思想来理…...
滚雪球学SpringCloud[5.1讲]: Spring Cloud Config详解
全文目录: 前言1. Spring Cloud Config的基本概念1.1 微服务配置管理的挑战1.2 Spring Cloud Config的架构 2. 配置服务端与客户端的配置2.1 配置服务端的搭建2.2 配置客户端的搭建2.3 环境隔离配置 3. 配置中心与Git的集成3.1 Git仓库的目录结构设计3.2 配置的版本…...
Unity常用随机数算法
Unity的Random.Range介绍 有两个重载: 如果参数存在至少一个浮点数那么将会触发public static float Range(float minInclusive, float maxInclusive); 返回一个范围内的浮点数(包含首尾) 如果参数都是整形则触发public static int Range(int minInclusive, int maxExclusiv…...
dial unix /var/run/docker.sock: connect: permission denied
要解决 permission denied 错误并授予当前用户 sunyuhua 访问 Docker 的权限,您可以按照以下步骤操作: 1. 检查 Docker 服务是否在运行 首先,确保 Docker 服务已经启动: sudo systemctl start docker sudo systemctl enable do…...
Prompt提示词技巧
文章目录 🍊 探索AI内容创作核心:提示词Prompt1 什么是提示词工程?1.1 提示词的原理1.2 提示词工程师的前景1.3 提示词工程师的门槛是否较低?1.4 提示词的未来展望 2 提示词编写的基本技巧3 常见的提示词框架3.1 CO-STAR框架3.2 BORKE框架3.…...
Android Wi-Fi 连接失败日志分析
1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分: 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析: CTR…...

树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法
树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源: http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作,无需更改相机配置。但是,一…...

突破不可导策略的训练难题:零阶优化与强化学习的深度嵌合
强化学习(Reinforcement Learning, RL)是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程,然后使用强化学习的Actor-Critic机制(中文译作“知行互动”机制),逐步迭代求解…...

遍历 Map 类型集合的方法汇总
1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...
解锁数据库简洁之道:FastAPI与SQLModel实战指南
在构建现代Web应用程序时,与数据库的交互无疑是核心环节。虽然传统的数据库操作方式(如直接编写SQL语句与psycopg2交互)赋予了我们精细的控制权,但在面对日益复杂的业务逻辑和快速迭代的需求时,这种方式的开发效率和可…...

CentOS下的分布式内存计算Spark环境部署
一、Spark 核心架构与应用场景 1.1 分布式计算引擎的核心优势 Spark 是基于内存的分布式计算框架,相比 MapReduce 具有以下核心优势: 内存计算:数据可常驻内存,迭代计算性能提升 10-100 倍(文档段落:3-79…...

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

学习STC51单片机32(芯片为STC89C52RCRC)OLED显示屏2
每日一言 今天的每一份坚持,都是在为未来积攒底气。 案例:OLED显示一个A 这边观察到一个点,怎么雪花了就是都是乱七八糟的占满了屏幕。。 解释 : 如果代码里信号切换太快(比如 SDA 刚变,SCL 立刻变&#…...

技术栈RabbitMq的介绍和使用
目录 1. 什么是消息队列?2. 消息队列的优点3. RabbitMQ 消息队列概述4. RabbitMQ 安装5. Exchange 四种类型5.1 direct 精准匹配5.2 fanout 广播5.3 topic 正则匹配 6. RabbitMQ 队列模式6.1 简单队列模式6.2 工作队列模式6.3 发布/订阅模式6.4 路由模式6.5 主题模式…...
MySQL 8.0 事务全面讲解
以下是一个结合两次回答的 MySQL 8.0 事务全面讲解,涵盖了事务的核心概念、操作示例、失败回滚、隔离级别、事务性 DDL 和 XA 事务等内容,并修正了查看隔离级别的命令。 MySQL 8.0 事务全面讲解 一、事务的核心概念(ACID) 事务是…...