当前位置: 首页 > 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.…...

滑动窗口(6)_找到字符串中所有字母异位词

个人主页&#xff1a;C忠实粉丝 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 C忠实粉丝 原创 滑动窗口(6)_找到字符串中所有字母异位词 收录于专栏【经典算法练习】 本专栏旨在分享学习算法的一点学习笔记&#xff0c;欢迎大家在评论区交流讨论&#x1f4…...

【无标题】rocket

rocketMQ集群双主双从同步模式(2m-2s-sync)搭建-CSDN博客 集群架构概念 在部署的时候首先要将nameserver启动起来&#xff0c;之后就是将broker启动起来&#xff0c;broker启动起来会将自己的信息注册到nameserver上面。之后再去创建topic&#xff0c;因为发消息的逻辑和收消…...

Maven国内镜像(四种)

配置Maven使用国内镜像是一个常见的做法&#xff0c;因为这样可以显著提高依赖下载的速度并避免网络不稳定带来的问题 在 settings.xml 文件中&#xff0c;需要添加或修改 <mirrors> 标签来指定国内镜像。 以下是几个可用的镜像 1. 阿里云 <mirrors> <mi…...

Linux环境中如何快速修改 JAR 包中的配置文件

在日常的 Java 开发中&#xff0c;我们时常会遇到需要修改 JAR 包中某个配置文件的情况。比如&#xff0c;某些场景下你可能需要调整 application-dev.yml 文件中的配置信息。但解压整个 JAR 包再重新打包会显得比较繁琐。本文将介绍一种快捷的方法&#xff0c;帮助你快速查找并…...

java高频面试题(2024最新)

HashMap使用哪些方法来解决哈希冲突&#xff1f; 使用链地址法&#xff08;使用散列表&#xff09;来链接拥有相同hash值的数据&#xff1b;使用2次扰动函数&#xff08;hash函数&#xff09;来降低哈希冲突的概率&#xff0c;使得数据分布更平均&#xff1b;引入红黑树进一步…...

WEB 编程:使用富文本编辑器 Quill 配合 WebBroker 后端

使用 Delphi 的 WebBroker 框架写 Web Server&#xff0c;需要一个前端的富文本编辑器。 评估了好几个&#xff0c;最后选择 Quill 这个开源的。 官方地址&#xff1a;Quill - Your powerful rich text editor 把前端代码&#xff0c;存储为一个单独的文本文件&#xff0c;方…...

新书出版,大陆首本NestJS图书《NestJS全栈开发解析:快速上手与实践》

新书全栈实战项目&#xff1a;数字门店管理平台开源啦&#x1f389;&#x1f389;&#x1f389; GitHub地址&#xff08;持续更新NestJS企业级实践&#xff09;&#xff1a;欢迎star⭐️⭐️⭐️ 前端ReactTypeScriptVite 后端NestMySQLRedisDocker 前言 对&#xff0c;你没看…...

面试题:react、vue中的key有什么作用?(key的内部原理)

1.虚拟DOM中key的作用: key是虚拟DOM对象的标识&#xff0c;当数据发生变化时&#xff0c;vue会根据【新数据】生成【新的虚拟DOM】随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较&#xff0c;比较规则如下: 2.对比规则: (1).旧虚拟DOM中找到了与新虚拟DOM相同的key: …...

基于python+django+vue的外卖管理系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、SSM项目源码 系统展示 【2025最新】基于pythondjangovueMySQL的外…...

初始分布式系统和Redis特点(

&#xff08;一&#xff09;认识redis Redis是一个开源&#xff08;BSD许可&#xff09;&#xff0c;内存存储的数据结构服务器&#xff0c;可用作数据库&#xff0c;高速缓存和消息队列代理。它支持字符串、哈希表、列表、集合、有序集合&#xff0c;位图&#xff0c;hyperlog…...