开发者学堂课程【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>
此时保存后,刷新浏览,观察源代码,如图:
发现登录路径不会匹配到后面的两个路由,所以展示的网页是空的,然后点击登录就会触发了路由的改变。改变之后,路由规则进行匹配,就会如下显示:
router-1ink 渲染出来的标签结果是一个 a 标签,所以可以认为,router-1ink 默认渲染 a 标签,如果想让渲染 span 标签,需要使用 tag ,代码如下:
<router-link to = “/login” tag = “span”>登录</router-link>
发现不管展示为哪个标签,在 router-link 内部,永远会给其绑定一个点击的触发事件去实现路由的转换。