3.1路由匹配以及命名路由

最新推荐文章于 2025-10-17 16:54:50 发布
原创 最新推荐文章于 2025-10-17 16:54:50 发布 · 324 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #vue.js #前端

本文介绍了Vue Router的基本使用方法，包括视图导入的不同方式、选中状态的样式控制及命名路由的概念。通过实例展示了如何利用router-link-exact-active类名实现选中效果，并解释了命名路由的优势。

1.router的导入视图的两种方法

1.1 第一种 类似于导入组件 1.首先导入： import 自定义页面名 from 页面路径 2. 然后使用：直接写这个自定义的页面名

在这里插入图片描述

1.2第二种方式 （）=> import(视图路径)

在这里插入图片描述

2.1选中时的效果改变，比如选中home，会变成绿色，选中about，他会变成绿色

在这里插入图片描述
在这里插入图片描述

通过检查我们发现，改变选择，class类名会改变

点我点击到home的时候 home文字class类名是“router-link-exact-active”

在这里插入图片描述

当我点击到about文字 home没有被选中的时候 home的类名是router-link-active
但是这个时候被选择的about文字 它的class类名变成了router-link-exact-active

在这里插入图片描述

那就说明 我们选择到了那个文字 或者区域 或者这个路由 那这个类名就会变成router-link-exact-active

2.2在代码中的操作是

在这里插入图片描述

在app.vue文件夹中的style区域 我们可以看到 常规的文字设置中是黑色加粗字体 但是里面有一个 router-link-exatc-active 表示的是此刻被选中的内容的样式设置 在这里就选择哪个文字 哪个文字就变成了绿色
router-link-exact-active就是表示完成路由匹配

3.1 在router/index.js文件中，我们除了定义路由规则之外(路由规则指的是每条路径对应的视图)还可以给每条路由规则取个名字，用名称来标识这条路由，这个被称为命名路由，用name属性来给路由命名。

在这里插入图片描述

4.1跳转

// 命名路由的必要性
// 首先 如果地址比较长 包括地址上还会有参数时 引用这个地址就不方便
// 或者是要修改路由规则时 相应的其他地方也需要改变
在这里插入图片描述
在这里插入图片描述
好处就是不用频繁的更改路径，不写死

人人都会Blazor—— 3.1 路由和导航
不忘初心
11-24 327
导航和路由是最基础且很常用的知识，你可以根据自己的需求去定义路由导航。当然，好的路由设计可以使你的站点看起来更专业，这也是体现你水平的最佳时机。
Vue 3 的路由机制（1）
突破编程
10-28 1568
路由参数：用于在URL路径中传递动态数据，通过定义，在目标组件中通过访问。查询参数：用于在URL末尾传递额外信息，通过?和构建，在目标组件中通过访问。
计算机网络匹配,[计算机网络]路由匹配原则
weixin_35370032的博客
07-08 2655
路由器的作用：路由器收到数据包后，会根据数据包中的目的IP地址选择一条最优的路径，并将数据包转发到下一个路由器，路径上最后的路由器负责将数据包送交目的主机。那么如何选择最优路径的，这便涉及到了路由选路。数据包在网络上的传输就好像是体育运动中的接力赛一样，每一个路由器负责将数据包按照最优的路径向下一跳路由器迚行转发，通过多个路由器一站一站的接力，最终将数据包通过最优路径转发到目的地。当然有时候由于实...
路由策略 匹配规则+实现机制
weixin_55773152的博客
05-20 2597
定义： 通过一系列工具或方法对路由进行各种控制的“策略”。 影响路由的产生、发布、选择等，进而影响报文的转发路径。 目的： 作用： 控制路由的接收、发布和引入，提高网络安全性。 修改路由属性，对网络数据流量进行合理规划，提高网络性能。 实现机制：路由策略的核心内容是过滤器，通过使用过滤器，定义一组匹配规则。 Route-Policy可以使用前面6种过滤器定义自己的匹配规则，不仅可以匹配路由属性，还可以改变路由属性。 路由策略各工具之间的调用关系： ...
路由基本概念1——路由表信息、路由进表以及转发流程、最长掩码匹配原则
热门推荐
m0_49864110的博客
07-11 2万+
路由就是指导报文转发的路径信息，可以将一个网段的数据包转发到另外的一个网段什么是相同的网段：相同的网络号、相同的子网掩码路由转发涉及的表项路由转发涉及到路由表和转发表两个表项其中路由表是控制层面的，描述了路由的发布形式，路由接收的过程等转发表真正指导路由转发，当数据包到达设备后直接通过转发表转发（对于华为来说转发表就是FIB表，锐捷转发表为Ref表）如何实现路由转发首先需要有具备路由功能的网络设备都来进行路由转发该网络设备通过路由表选择该报文匹配的路由，然后通过转发表进行路由转发。
路由匹配总结
weixin_30611509的博客
08-05 341
1、关于{controller}/{action}必不可少：在一个实际的MVC系统中，{controller}/{action}必不可少，如果缺少就会出现找不到路径而出错 约定规则：这个占位符是MVC里面约定的，并且会被解析成控制器和对应的方法 位置灵活：这两个约定的占位符可以在任意位置 2、其他占位符仅仅是占位：比如{aa}/{bb}/{cc}，这里面的aa不能被解析成控制器，bb也...
有类与无类路由下的路由匹配原则
09-30 991
　　使用有类路由：路由器首先匹配主网络号，如果主网络号存在，就继续匹配子网号，且不考虑缺省路由，如果子网无法匹配，丢弃数据包（在分类路由下，路由器认为知道所有主网络下的全部子网），并使用ICMP返回一个不可达回应。如果主网络号不存在，使用缺省路由（缺省路由存在前提）。　　上述情况出现在某些早期IOS版本里（12.0以前版本），这些早期版本默认没有打开ip classless.　　打开ip
使用higress进行即梦3.1文生图路由转发
08-21
# 这里可以添加Higress特定的注解，例如路由匹配规则等 spec: ingressClassName: higress # 指定Ingress控制器为Higress rules: - host: text-to-image.example.com # 替换为你的域名 http: paths: - path:...
6、Rails路由：原理、技巧与实践
最新发布
qsc90123456的博客
10-17 9
本文深入讲解了Rails路由系统的核心原理与实用技巧，涵盖根路由定义、通配符使用、命名路由创建与优化、路由作用域与命名空间管理、约束设置以及路由列表查看方法。通过实际代码示例和最佳实践建议，帮助开发者高效构建清晰、可维护的URL映射结构，并提供常见问题解决方案，提升Rails应用的开发效率与稳定性。
【Vue3 生态】VueRouter 路由核心知识点
前端知识分享喵
07-02 519
如同调用 router.push() 一样，可以跳转到这个指定的路由地址，可以在返回对象中通过如：replace:true 或 name: ‘home’ 之类的属性来指定这个路由地址。Vue Router 提供了多种路由守卫，如：全局路由守卫、组件内路由守卫或单个路由独享守卫。带路由的项目组件中，使用 $route 会与路由紧密耦合，这限制了组件的灵活性，使得它只能用于特定的 URL。创建 ，需要正确的配置服务器。一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。
命名路由的匹配规则
weixin_45277714的博客
08-22 569
为了方便表示路由的路径，可以给路由规则起一个名字 //router-link 的 to 前要加: 为属性绑定 <router-link :to="{name:'user',params:{id:123}}">user</router-link> <router-link :to="{name:'register',params:{name:'wanghao'}}">register</router-link> const User = {
路由的匹配模式
我脾气呢的博客
07-10 612
模糊匹配模式 当Link组件的to属性值为 ‘/login’ 时候，为什么默认路由也被匹配成功？ 默认情况下，React路由是模糊匹配模式 模糊匹配规则：只要pathname以path开头就会匹配成功 精确匹配 默认路由认可情况下都会展示，如果避免这种问题？ 给Route组件添加exact属性，让其变为精准匹配模式 精确匹配：只有当path和pathname完全匹配时才会展示改路由 默认是模糊匹配，添加exact编程精确匹配 ...
路由匹配顺序
u013197955的博客
09-04 1万+
路由器路由匹配顺序总结： 1.路由策略匹配。若路由器上有路由策略，首先执行路由策略，若无路由策略，则查询路由表。 2.最长子网掩码匹配。即当在路由表中有多条 到达某个IP地址的路由时，优先选择子网掩码最长的路由。 3.管理距离最小匹配。若执行最长子网掩码匹配后，路由表中 仍有多条到达某个IP地址的路由，优先选择管理距离（AD）最小的。 4.负载均衡。若执行管理距离最小匹配后
命名路由
tangtian_yes的博客
04-19 682
vue-router提供了一种隐式的引用路径，即命名路由，可以在创建Router实例的时候，在 routes 中给某个路由设置名称name值。通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候，通过路由的名称取代路径地址直接使用。 ...
路由匹配规则
diaodundi4858的博客
11-29 753
routes.MapRoute( name: "Default", url: "{controller}/{action}/{id}", //相当 kong + {controller} +{controller}/{action}+{controller}/{action}/{id} ...
vue2进阶篇：vue-router之命名路由
刘大猫
07-09 2019
vue2进阶篇：vue-router之命名路由
给路由命名
richest_qi的博客
03-09 800
给路由命名，可以使用组件名来指定跳转路径。具体看例子吧。 本篇基于路由的query参数中的完整实例。 在router/index.js中的两条路由规则中添加命名：guanyu、xiangqing，如下所示。 import VueRouter from "vue-router"; import Home from "../pages/Home"; import About from "../pages/About"; import News from "../pages/News"; import Messa
react-router 路由匹配
onegoldensun的博客
07-28 3072
URL 类型 http://localhost:8080/#/listrepo?name=555&id=66666    值存在this.props.location.query中   url类型 http://localhost:8080/#/listrepo/555/66666      值存在this.props.params中
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值