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

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模式

  1. 工作原理

history模式利用 HTML5 的 History API (pushState, replaceState, 和 popState 事件) 来管理路由。浏览器的 URL 不包含 # 符号,而是直接显示路由的路径部分。需要对服务器进行配置,以确保所有路由请求都返回应用的入口 HTML 文件。

  1. 优点
  • 更清晰的 URL:没有 # 符号,URL 更加整洁和符合标准。
  • 支持更复杂的功能:支持浏览器的前进、后退功能,与传统的浏览器行为一致。
  1. 缺点
  • 需要服务器配置:必须配置服务器以处理路由,避免 404 错误。
  1. 示例
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模式

  1. 工作原理

哈希模式使用 URL 的 # 符号后面的部分来表示路由状态。浏览器不会将 # 后面的部分发送到服务器,所有的路由切换都在客户端完成。

  1. 优点
  • 兼容性:几乎所有浏览器都支持哈希模式,且不需要额外的服务器配置。
  • 简单:无需配置服务器即可处理路由。
  1. 缺点
  • URL 显得不美观:URL 中包含 # 符号,这可能会影响用户体验和 SEO。
  • 某些功能限制:如部分工具或库可能对哈希 URL 的支持较差。
  1. 示例
import { createRouter, createWebHashHistory } from 'vue-router';const routes = [{ path: '/', component: Home },{ path: '/about', component: About },
];const router = createRouter({history: createWebHashHistory(),routes,
});export default router;
  1. 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 中&#xff0c;路由指的是应用程序的导航系统&#xff0c;允许你在不同的视图或页面之间进行切换。通过 vue-router 插件&#xff0c;你可以定义路由规则&#xff0c;将 URL 路径映射到 Vue 组件&#xff0c;实现页面间的跳转和状态管理。使用路由&#xff0c;用户可以…...

哪些人适合学习人工智能?

人工智能&#xff08;AI&#xff09;的浪潮正席卷全球&#xff0c;它不仅是科技领域的一场革命&#xff0c;更是社会进步的重要推手。随着AI技术的不断成熟和应用领域的不断拓展&#xff0c;越来越多的人开始关注并渴望掌握这一前沿技术。那么&#xff0c;究竟哪些人适合学习人…...

计算机的错误计算(九十七)

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

Flask-Migrate的使用

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

python怎么输入整数

使用input()函数输入一个整数&#xff1a; ainput&#xff08;“请输入一个整数\n”&#xff09; 结果却报错TypeError: str object cannot be interpreted as an integer 查阅文档发现input()函数返回值是str型。 我们只需要这样转换&#xff1a; aint(input("请输入一…...

代码随想录打卡Day36

今天做的头皮发麻&#xff0c;除了第一道题是自己AC的&#xff0c;剩下两道题目都是看视频才AC的&#xff0c;主要是看了视频也花了很久时间才想清楚。 1049. 最后一块石头的重量 II 这道题一开始没什么思路&#xff0c;但是看到提示说和昨天的分割子集很像&#xff0c;然后我…...

速盾:凡科建站开cdn了吗?

凡科建站是一家专业的建站平台&#xff0c;提供了多种功能和工具来帮助用户快速搭建自己的网站。随着互联网技术的不断发展&#xff0c;网站的访问速度和稳定性成为了越来越重要的考虑因素。为了优化用户体验&#xff0c;提高网站的加载速度&#xff0c;凡科建站已经开启了CDN&…...

python贪吃蛇游戏项目源码【免费】

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

Mycat搭建分库分表

分库分表解决的问题 单表数据量过大带来的性能和存储容量的限制的问题&#xff1a; 索引效率下降读写瓶颈存储容量限制事务性能问题分库分表架构 再搭建一对主从复制节点&#xff0c;3307主节点&#xff0c;3309从节点配置数据源 dw1 , dr1,创建集群c1创建逻辑库 CREATE DATAB…...

Python中的数据结构

1.列表 可以将列表理解为一个购物清单&#xff0c;这个清单里面的的每个元素可以是任何类型&#xff0c;并且可以重复&#xff08;这里区别了列表与数组&#xff09;。列表用“[]”表示。 #这里定义了一个列表&#xff0c;列表中的元素的类型不同。 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 自然右连接自然连接的两张表没有同名字段怎么办&#xff1f; 7. …...

typescript-tsconfig文件解释

ts.config.json 作用 用于标识 TypeScript 项目的根路径用于配置 TypeScript 编译器用于指定编译的文件 重要字段 files - 设置要编译的文件的名称&#xff1b;include - 设置需要进行编译的文件&#xff0c;支持路径模式匹配&#xff1b;exclude - 设置无需进行编译的文件…...

所有用贪心的算法和所有用动态规划(dp)的算法合集

贪心 纯贪心算法&#xff08;常在普及组中做暴力题正解使用&#xff09;DijkstraBFS&#xff08;最短路径&#xff09;KruskalPrimSollin&#xff08;Boruvka)二分三分最值排序LCA&#xff08;纯贪心版&#xff09; 动态规划&#xff08;dp&#xff09; Floyd线性DP区间DP背…...

论文阅读 | 基于流模型和可逆噪声层的鲁棒水印框架(AAAI 2023)

Flow-based Robust Watermarking with Invertible Noise Layer for Black-box DistortionsAAAI, 2023&#xff0c;新加坡国立大学&中国科学技术大学本论文提出一种基于流的鲁棒数字水印框架&#xff0c;该框架采用了可逆噪声层来抵御黑盒失真。 一、问题 基于深度神经网络…...

上线跨境电商商城的步骤

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

Python基础(七)——PyEcharts数据分析(面向对象版)

四、使用PyEcharts数据分析案例&#xff08;面向对象版&#xff09; 【前言&#xff1a;为了巩固之前的Python基础知识&#xff08;一&#xff09;到&#xff08;五&#xff09;&#xff0c;并为后续使用Python作为数据处理的好帮手&#xff0c;我们一起来用面向对象的思想来理…...

滚雪球学SpringCloud[5.1讲]: Spring Cloud Config详解

全文目录&#xff1a; 前言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 的权限&#xff0c;您可以按照以下步骤操作&#xff1a; 1. 检查 Docker 服务是否在运行 首先&#xff0c;确保 Docker 服务已经启动&#xff1a; sudo systemctl start docker sudo systemctl enable do…...

Prompt提示词技巧

文章目录 &#x1f34a; 探索AI内容创作核心&#xff1a;提示词Prompt1 什么是提示词工程?1.1 提示词的原理1.2 提示词工程师的前景1.3 提示词工程师的门槛是否较低&#xff1f;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) 日志相关部分&#xff1a; 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析&#xff1a; CTR…...

树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法

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

突破不可导策略的训练难题:零阶优化与强化学习的深度嵌合

强化学习&#xff08;Reinforcement Learning, RL&#xff09;是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程&#xff0c;然后使用强化学习的Actor-Critic机制&#xff08;中文译作“知行互动”机制&#xff09;&#xff0c;逐步迭代求解…...

遍历 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应用程序时&#xff0c;与数据库的交互无疑是核心环节。虽然传统的数据库操作方式&#xff08;如直接编写SQL语句与psycopg2交互&#xff09;赋予了我们精细的控制权&#xff0c;但在面对日益复杂的业务逻辑和快速迭代的需求时&#xff0c;这种方式的开发效率和可…...

CentOS下的分布式内存计算Spark环境部署

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

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

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

学习STC51单片机32(芯片为STC89C52RCRC)OLED显示屏2

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

技术栈RabbitMq的介绍和使用

目录 1. 什么是消息队列&#xff1f;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 事务全面讲解&#xff0c;涵盖了事务的核心概念、操作示例、失败回滚、隔离级别、事务性 DDL 和 XA 事务等内容&#xff0c;并修正了查看隔离级别的命令。 MySQL 8.0 事务全面讲解 一、事务的核心概念&#xff08;ACID&#xff09; 事务是…...