路由 -router-link 的使用|学习笔记

简介: 快速学习路由 -router-link 的使用

开发者学堂课程【Vue.js 入门与实战路由-router-link 的使用】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址https://developer.aliyun.com/learning/course/586/detail/8193


路由 -router-link 的使用


一、路由-router-link 的使用

因为每次在写a连接的时候都要在前面加一个#号,比较繁琐,vue-router 除了提供 router-view 还提供另外一个元素,router-;ink ,下面代码:

<router-link to=" / login">登录</router-link>

<router-1link to=" /register">注册、/router-1ink>

此时保存后,刷新浏览,观察源代码,如图:

1666939264089.jpg

发现登录路径不会匹配到后面的两个路由,所以展示的网页是空的,然后点击登录就会触发了路由的改变。改变之后,路由规则进行匹配,就会如下显示:

1666939274897.jpg

router-1ink 渲染出来的标签结果是一个 a 标签,所以可以认为,router-1ink 默认渲染 a 标签,如果想让渲染 span 标签,需要使用 tag ,代码如下:

<router-link to = “/login” tag = “span”>登录</router-link>

发现不管展示为哪个标签,在 router-link 内部,永远会给其绑定一个点击的触发事件去实现路由的转换。

相关文章
element 下拉菜单el-dropdown如何更改样式?
element 下拉菜单el-dropdown如何更改样式?
1855 0
【moment】两个Moment时间大小的比较
【moment】两个Moment时间大小的比较
|
12月前
|
移动开发 前端开发 JavaScript
vue-router学习一:什么是路由,路由分类,路由安装,路由使用,路由默认路径,history模式,默认的linkActiveClass属性,路由代码跳转
这篇文章是关于Vue.js官方路由管理器vue-router的详细介绍,包括路由的基本概念、分类、安装、使用以及在单页面应用中的路由模式和跳转方法。
788 0
vue-router学习一:什么是路由,路由分类,路由安装,路由使用,路由默认路径,history模式,默认的linkActiveClass属性,路由代码跳转
完美解决Non-terminating decimal expansion; no exact representable decimal result.异常
完美解决Non-terminating decimal expansion; no exact representable decimal result.异常
26941 0
完美解决Non-terminating decimal expansion; no exact representable decimal result.异常
|
12月前
|
前端开发 开发者 容器
Vue3中Sass的安装与使用指南:轻松上手CSS预处理器
Vue3中Sass的安装与使用指南:轻松上手CSS预处理器
947 0
|
存储 NoSQL Java
探索Java分布式锁:在高并发环境下的同步访问实现与优化
【6月更文挑战第30天】Java分布式锁在高并发下确保数据一致性,通过Redis的SETNX、ZooKeeper的临时节点、数据库操作等方式实现。优化策略包括锁超时重试、续期、公平性及性能提升,关键在于平衡同步与效率,适应大规模分布式系统的需求。
398 1
|
关系型数据库 MySQL 大数据
MySQL分区与分表:优化性能与提升可扩展性
本文深入探讨了MySQL数据库中的分区与分表策略,通过详细的代码示例,解释了分区的概念与用途、不同的分区类型以及创建分区表的步骤。同时,文章还介绍了分表的概念、策略和实际操作方法,以代码演示展示了如何创建分表、插入数据以及查询数据。分区和分表作为优化数据库性能和提升可扩展性的关键手段,通过本文的阐述,读者将能够深入了解如何根据数据特点选择合适的分区方式,以及如何灵活地处理大量数据,提高查询和维护效率。这些技术将为数据库设计和优化提供有力支持,确保在大数据场景下能够高效地管理和查询数据。
2536 0
|
资源调度 JavaScript Windows
'vue-cli-service' 不是内部或外部命令,也不是可运行的程序问题解决
【5月更文挑战第7天】'vue-cli-service' 不是内部或外部命令,也不是可运行的程序问题解决
19510 3
|
算法 PyTorch 算法框架/工具
论文解读:LaMa:Resolution-robust Large Mask Inpainting with Fourier Convolutions
论文解读:LaMa:Resolution-robust Large Mask Inpainting with Fourier Convolutions
1274 0