路由-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>

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

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

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

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

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