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.…...

大话软工笔记—需求分析概述
需求分析,就是要对需求调研收集到的资料信息逐个地进行拆分、研究,从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要,后续设计的依据主要来自于需求分析的成果,包括: 项目的目的…...
树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频
使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源: http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...

【人工智能】神经网络的优化器optimizer(二):Adagrad自适应学习率优化器
一.自适应梯度算法Adagrad概述 Adagrad(Adaptive Gradient Algorithm)是一种自适应学习率的优化算法,由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率,适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...
k8s从入门到放弃之Ingress七层负载
k8s从入门到放弃之Ingress七层负载 在Kubernetes(简称K8s)中,Ingress是一个API对象,它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress,你可…...
鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序
一、开发准备 环境搭建: 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 项目创建: File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...

剑指offer20_链表中环的入口节点
链表中环的入口节点 给定一个链表,若其中包含环,则输出环的入口节点。 若其中不包含环,则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...
在Ubuntu中设置开机自动运行(sudo)指令的指南
在Ubuntu系统中,有时需要在系统启动时自动执行某些命令,特别是需要 sudo权限的指令。为了实现这一功能,可以使用多种方法,包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法,并提供…...

C# 类和继承(抽象类)
抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...
JDK 17 新特性
#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持,不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的ÿ…...

OPENCV形态学基础之二腐蚀
一.腐蚀的原理 (图1) 数学表达式:dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一,腐蚀跟膨胀属于反向操作,膨胀是把图像图像变大,而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。 腐蚀…...