路由 -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 内部,永远会给其绑定一个点击的触发事件去实现路由的转换。

相关文章
|
7月前
|
算法 网络架构
router和route的区别?
router和route的区别?
432 0
|
JavaScript 数据安全/隐私保护
点击router-link时候会发生什么?
点击router-link时候会发生什么?
114 0
|
1月前
|
Dubbo 前端开发 JavaScript
Router
Router
28 1
Router
|
4月前
|
JavaScript
Vue中router路由的使用、router-link的使用(在项目中的实际运用方式)
这篇文章介绍了Vue中router路由和router-link的使用方式,包括router配置、router-link在模板中的使用,以及实现的导航菜单和页面路由效果。
Vue中router路由的使用、router-link的使用(在项目中的实际运用方式)
|
6月前
|
前端开发 JavaScript 网络架构
route和router的区别
route和router的区别
71 0
|
网络架构
$router和$route的区别?
$ router是用来操作路由的,$ route是用来获取路由信息的。
|
7月前
|
前端开发 网络架构
浅谈Router和Route
浅谈Router和Route
60 0
|
7月前
|
JavaScript 网络架构
$route和$router的区别
$route和$router的区别
69 0
|
网络架构
Transit Router
阿里云的转发路由器 Transit Router(简称“TR”)是一款功能强大的网络转发产品,它可以为用户提供灵活、可靠、大规模的企业级互联网络
|
前端开发 JavaScript 网络架构
Route和Router的区别
Route和Router的区别
123 0