【Vue3】深入理解Vue3路由器的工作原理&to的两种写法

最新推荐文章于 2025-10-20 08:12:48 发布
原创 最新推荐文章于 2025-10-20 08:12:48 发布 · 2.7k 阅读 · 46 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#智能路由器 #javascript #vue.js #学习

本文详细介绍了Vue3路由器的工作原理，包括路由器实例、选项、路由表、路由视图和导航守卫。重点讲解了history和Hash模式的特点及其适用场景，并提到了`to`在`RouterLink`中的两种写法。

💗💗💗欢迎来到我的博客，你将找到有关如何使用技术解决问题的文章，也会找到某个技术的学习路线。无论你是何种职业，我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章，也欢迎在文章下方留下你的评论和反馈。我期待着与你分享知识、互相学习和建立一个积极的社区。谢谢你的光临，让我们一起踏上这个知识之旅！
请添加图片描述

文章目录

Vue3提供了一个强大而灵活的路由器，它能够帮助我们构建单页面应用程序（SPA）并管理页面之间的导航。本文将深入探讨Vue3路由器的工作原理，包括其核心概念、使用方法以及一些高级技巧。

🍋路由器的核心概念

在Vue3中，路由器的核心概念包括路由器实例、路由器选项、路由表、路由视图和导航守卫。

  • 路由器实例：我们可以通过创建一个路由器实例来启动Vue3的路由器。路由器实例包含了路由器的配置选项，例如路由表、路由模式（hash或history）等。

  • 路由器选项：路由器选项是一个包含路由配置的对象。它定义了应用程序的路由规则，包括路由路径和对应的组件。

  • 路由表：路由表是一个映射路由路径和组件的配置对象。它告诉路由器在匹配到特定路径时应该渲染哪个组件。

  • 路由视图：路由视图是一个用来显示匹配到的路由组件的组件。在Vue3中，我们使用组件来渲染匹配到的组件。

  • 导航守卫：导航守卫是一个可以在路由跳转时进行拦截的函数。我们可以使用导航守卫来实现路由的权限控制、页面加载状态管理等功能。

本节主要介绍的就是history和hash模式，首先我们来看看history模型

🍋history模式

在 history 模式下，Vue Router 使用浏览器提供的 History API 来管理路由状态。这种模式下的 URL 更加友好，不再需要 # 符号。
特点

无 # 符号：history 模式的 URL 更加美观，不含有 # 符号，更符合传统 URL 的表现形式。
需要服务器支持：由于 history 模式使用了 History API，因此需要服务器的支持。在生产环境中，需要配置服务器以支持对所有页面的访问都返回同一个 HTML 文件，以便在路由跳转时正确加载应用程序。

使用场景

需要SEO：对于需要被搜索引擎索引的应用，使用 history 模式更为合适，因为搜索引擎可以正确解析这种形式的 URL。

上节我们使用的就是history模式
在这里插入图片描述

🍋Hash模式

在 hash 模式下，URL 中的 # 符号被用作路由地址与其后面的参数（称为哈希）的分隔符。因此，http://example.com/#/foo 和 http://example.com/#/bar 都属于 hash 模式下的 URL。
特点

兼容性良好：hash 模式的 URL 兼容性较好，因为在大部分浏览器中，改变 URL 中的哈希不会重新加载页面。
简单实现：hash 模式不需要服务器端的额外配置，可以直接在前端实现。

使用场景

静态站点：对于静态站点或不需要SEO的应用，hash 模式是一个简单而有效的选择。

如果我们想用Hash模式，和上一节一样我们导入

import {createWebHashHistory} from 'vue-router'

之后我们修改一下

history:createWebHashHistory(),

运行后的界面的地址栏就会有#了

在这里插入图片描述

🍋to的两种写法

这里或许有人忘了to在哪里出现过吧，提醒一下RouterLink，路由跳转的组件

下面是两种to的写法，具体用哪个具体情况具体分析，效果一样

<RouterLink to="/about" active-class="MT">关于</RouterLink>
<RouterLink :to="{path:'/about'}" active-class="MT">关于</RouterLink>

🍋总结

在开发过程中，可以根据实际需求选择合适的模式来使用

请添加图片描述

挑战与创造都是很痛苦的，但是很充实。

「Vue3系列」Vue3 路由
日常笔记/总结/系列知识梳理
03-06 1612
路由元信息（Route Meta）允许你在路由配置中定义一些自定义信息，这些信息可以在路由守卫（Navigation Guards）或其他地方使用。Vue Router 提供了许多高级功能，包括路由元信息配置、嵌套路由和动态路由匹配。嵌套路由允许你创建一个多级导航结构，你可以在一个路由内部定义子路由。动态路由匹配允许你定义可变的 URL 部分，用于匹配不同的参数。提供了一些属性来定制链接的行为和外观。事件，并阻止其默认行为（即阻止页面跳转），除非。默认的标签，如果指定了的话）。在 Vue 3 中，
vue项目记录（一）路由配置
Y的博客
08-20 234
利用路由守卫进行登录验证、token是否有效验证提示：以下是本篇文章正文内容，下面案例可供参考。
【Vue3 生态】Vue Router 路由知识概览
前端知识分享喵
06-19 4247
在 Web 前端开发中，路由是非常重要的一环，但是路由到底是什么呢？
Vue 3 路由完整教程
最新发布
Rysxt_的博客
10-20 990
Vue Router 是 Vue.js 官方提供的​​，适用于 Vue 3，让你能够在单页应用(SPA)中实现不同"页面"的跳转，而无需每次都重新加载页面。
深入理解 Vue3 路由：to 的两种写法详解
m0_57836225的博客
02-22 1129
在 Vue3 的开发过程中，路由是构建单页应用不可或缺的部分。而路由中的to属性，有着两种不同的写法，掌握它们对于灵活实现页面跳转和参数传递至关重要。今天，我们就来深入探讨这两种写法。
vue3的vue-router原理
我的博客简介
06-29 859
vue-router官网链接在main.js文件下，给挂载到实例上 动态路由，在组件内部如何去监测路由变化 vue-router基本实现 vue-router开发源码 mini-vue-router代码简单实现的mini-vue-router代码如下App.vue main.js router / index.js router / router.js router / RouterLink.js router / RouterView.js...
vue基础用法&基础原理整理
热门推荐
hangao233的博客
04-06 7万+
vue基础用法&基础原理整理 1. vue基础知识和原理 1.1 初识Vue 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象 demo容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法 demo容器里的代码被称为【Vue模板】 Vue实例和容器是一一对应的 真实开发中只有一个Vue实例，并且会配合着组件一起使用 {{xxx}}是Vue的语法：插值表达式，{{xxx}}可以读取到data中的所有属性 一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新
vue3 尚硅谷vue3入门到实战
wk964269669的博客
07-03 1300
vue3 基础知识
Vue3快速上手
萧曳丶
06-15 1038
VUE3快速上手
【前端之Vue3路由机制router】
weixin_44666786的博客
07-26 1401
Vue3路由机制router 传参、守卫、重定向.....
Vue3学习汇总（路由篇）
weixin_50845028的博客
09-09 1409
路由篇
【Vue3进阶秘籍】玩转路由to！带你飞越导航的两种姿势！
Jacklx888的博客
08-25 1276
Hey小伙伴们，今天要给大家带来的是Vue3中非常实用的路由导航技巧——`to`的两种使用方法！无论是初学者还是老司机，都能从中收获满满！👩‍💻✨
Vue3 to全家桶
cloki的博客
09-30 258
Vue3 to全家桶
【Vue3】深入理解Vue3路由器的工作原理&amp；to的两种写
jiameih的博客
04-05 1106
💗💗💗欢迎来到我的博客，你将找到有关如何使用技术解决问题的文章，也会找到某个技术的学习路线。无论你是何种职业，我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章，也欢迎在文章下方留下你的评论和反馈。我期待着与你分享知识、互相学习和建立一个积极的社区。
Vue3之to系列
jxbook的博客
03-15 307
可以帮我们批量创建ref对象主要是方便我们解构使用（复制 reactive 里的所有属性并转成 ref）的就不会更新视图 数据是会变的，如果原始对象是响应式的是会更新视图并且改变数据的。const rraw = toRaw(person) //转为普通对象。注：数据（info ，rGreet ）会变化，视图会更新。// 复制 info 里的 greet 属性。uname.value= '嘿嘿'注：数据会变化，但是视图不会更新。// 更改 rGreet。将响应式对象转为普通对象。注：解构数据的时候常用。
Vue3 的深入学习
jomes_wang的博客
10-18 481
继续学习，冲冲冲 一： 项目搭建以前我们搭建项目直接就vue-cli生成了,但是现在不同了，现在有两种方式： 1.1.尤大大推荐的vite 优点：总结一个字，就是快！ 不需要打包，冷启动服务器 即时热模块更换 按需编译,不会出现模块变多而热更新变慢的问题 缺点：安装插件的时候有时候会出现莫名其妙的报错… 提示：这里vue-router、vuex 都要自己安装，而且必须是4.0+，vi...
vue3深入了解
weixin_42283818的博客
09-21 661
vue3
Vue3 —— to 全家桶及源码学习
weixin_42289080的博客
08-10 707
Vue3 的 to全家桶：toRef、toRefs、toRaw及源码学习
vue 3 第六章：to全家桶
to_the_Future的博客
02-28 835
这篇文章介绍了Vue3中将响应式对象的属性转换为响应式引用的toRef函数和用于将多个响应式对象的属性转换为响应式引用的toRefs函数，以及用于获取响应式对象的原始对象的toRaw函数。这些函数可以帮助我们快速创建响应式数据，实现数据的自动更新。需要注意的是，使用`toRaw`函数获取一个响应式对象的原始对象是不推荐的做法，因为原始对象不具备响应式的特性，对原始对象的修改不会触发相应的依赖更新。
vue3路由写法
03-21
### Vue 3 中路由的实现方法 Vue 3 使用 `vue-router` 库来管理应用中的导航和组件加载。以下是关于如何在 Vue 3 项目中配置和使用路由的具体说明。 #### 安装 Vue Router 为了在 Vue 3 项目中使用路由功能，首先需要安装最新版的 `vue-router`： ```bash npm install vue-router@next ``` 此命令会自动下载适用于 Vue 3 的版本[^1]。 --- #### 基本路由配置 创建一个名为 `router.js` 或 `index.js` 的文件用于定义路由规则。以下是一个简单的示例： ```javascript import { createRouter, createWebHistory } from &#39;vue-router&#39;; import Home from &#39;../views/Home.vue&#39;; // 主页组件 import Category from &#39;../views/Category/index.vue&#39;; // 分类页面组件 const routes = [ { path: &#39;/&#39;, name: &#39;Home&#39;, component: Home, }, { path: &#39;/category/:id&#39;, // 动态参数 :id name: &#39;Category&#39;, component: Category, props: true, // 启用 props 将动态参数传递给组件 } ]; const router = createRouter({ history: createWebHistory(), routes, }); export default router; ``` 上述代码展示了基本的路由设置方式，其中 `/category/:id` 表示带有动态参数的路径[^2][^3]。 --- #### 在主入口文件引入并挂载路由器 编辑项目的主入口文件（通常是 `main.js`），将路由器实例注入到根组件中： ```javascript import { createApp } from &#39;vue&#39;; import App from &#39;./App.vue&#39;; import router from &#39;./router&#39;; const app = createApp(App); app.use(router); // 注册路由 app.mount(&#39;#app&#39;); ``` 通过这种方式，整个应用程序都可以访问路由系统。 --- #### 页面模板与导航链接 在实际开发过程中，通常会在 `.vue` 文件中编写 HTML 结构以及绑定数据逻辑。例如，在某个父级组件中可以这样渲染子路由内容： ```html <template> <div> <h1>这是首页</h1> <!-- 导航 --> <router-link to="/">回到主页</router-link><br /> <router-link :to="{name:&#39;Category&#39;, params:{id:1}}">进入分类页面(id=1)</router-link> <!-- 子路由出口 --> <router-view></router-view> </div> </template> ``` 这里 `<router-link>` 提供了一种声明式的导航方式；而 `<router-view>` 则作为占位符显示当前匹配的视图内容。 --- #### Props 参数传递 如果希望更灵活地向目标组件传入额外的数据，则可以在路由对象里开启 `props` 属性支持。当启用该选项后，所有 URL 上查询字符串或者片段都会被解析成对应的键值对形式发送过去。 比如上面提到过的 `Category` 组件内部可以直接接收这些属性： ```javascript // views/Category/index.vue <script setup> defineProps([&#39;id&#39;]); // 接收来自路由的 id 参数 </script> <template> <p>当前分类 ID：{{ id }}</p> </template> ``` 如此一来便实现了基于路径变化更新展示信息的效果。 ---
评论 57
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小馒头学python

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值