文章页面

本文章系列：vue2.0一起在懵逼的海洋里越陷越深 (http://leenty.com/tags/vuejs/) 前面写了vue-router组件的初步用法，原来这次想写vuex的，但是想想还是先继续把vue-router写完吧🤔 vue2.0

上回说到: vue-router的基本用法，下面继续深入

啊不！是继续向着懵逼海洋的海底继续下沉，哈哈哈哈前面已经设置了两个路由，一个是首页，一个是文章页，现在在开一个演示页的路由首页以后顶多就展示下大致的新内容，文章页顶多放放文章详情这演示页可就厉害了，接下来的一些演示都会放在这里，具体的布局还没想好，先这么用着吧！

vue-router的超链接标签“router-link”

在vue1.0版本的超链接标签还是原来的a标签，链接地址由v-link属性控制(具体的这里也不多说了，vue1.0已经过去啦) 而vue2.0版本里超链接标签由a标签被替换成了router-link标签，当然，没有必要不用担心什么，因为最后没有什么特殊的设置的话，router-link标签还是会被渲染成a标签的。至于为什么在vue2.0的时候被替换成了router-link标签呢？大致YY了下，部分情节应该是这样的：

最主要情况，在上个版本中，链接只能以a标签的形式存在，不能满足一些特殊的要求，比如在列表(ul>li)下，你需要为在里下面再加上一个a链接才能完成点击列表跳转页面，so2.0版本中路由从a标签变成了可以任意渲染成各种元素的router-link标签，如此一来，就可以直接渲染成li标签，省下了a标签(具体怎么做下面会统一说明)
为什么不直接使用正常a标签写法做链接跳转呢？当点击正常的a链接时，就会感觉到页面跳转时的页面刷新重载的感觉，因为这个a标签并没有被vue-router所监听到事件的触发，所以就会发生正常的页面跳转，所以页面就会重载。那是传统的网页上才会发生的事。使用了vue-router组件所提供的router-link后，页面内的a标签就会被vue所监听，以便在用户点击链接的时候阻止浏览器的默认跳转行为，而转为无刷新加载的方式。当然这只作用于自己的站点内。

“router-link”标签的属性(Props)

没错，只要是标签，多多少少都是有属性的，最次class和id属性也是可以添加的。下面说说router-link标签的各个属性

“to”属性

to属性最简单的用法就是如a标签里的href属性一样的填写，简单粗暴，想去哪就去哪。其实，to属性的值可以有两种：

** 其一为字符串形式，也就是前面说到的如href一样的用法 **

<!-- 字符串 -->
<router-link :to="/article">Article</router-link>
<!-- 渲染结果 -->
<a href="/article">Article</a>

** 其二为对象形式，下面看看to属性的对象的主要结构 **

// 主要结构
{
  name: 'Article'
}
  // 或者
{
  path: '/article'
}
// 二者选其中之一，如果两种都使用，那么vue会选择使用name字段
// eg
{
  name: 'Article',
  path: '/demo'
}
// 实际效果等同于:
{
  name: 'Article'
}

对于里面的path字段，其实就是就是想去哪就去哪的to属性字符串的对象形式至于name字段，是不是会有些懵逼？这个name其实就是上一篇里说到的routes.js文件里的name字段啦！就是这个！填成一样的就好啦！注意大小写哦 routes.js-name字段

** to属性的对象的可选结构 **

{
  name: 'Article', // 与path字段二选一
  path: '/article', // 与name字段二选一
  params: { // 可选字段 隐性的传递参数(多用来页面传参)
    userId: 123 // 传递的参数demo
  },
  query: { // 可选字段 查询参数，就是url里‘?’之后的部分
    plan: 'private' // 查询参数demo
  }
}

可以使用chrome插件vue.js devtools来查看vue的路由的params参数，安装这个插件需要翻墙下载或者可以去github上下代码编译插件,如果觉得麻烦也可以百度去其他网站下对于可选参数是不是会有些懵，下面贴几张图就明白了查看路由参数其中params是隐性传递，query是显性传递。路由query 红框部分就是传递的query了

“replace”属性

顾名思义，replace是替换的意思，所以在router-link标签添加了这个属性后，页面切换时不会留下历史记录

<router-link :to="{ path: '/abc'}" replace></router-link>

“append”属性

append会把当前路径设置为相对路径，何为相对路径？比如你当前在vue2.leenty.com/demo下，点击这个链接<router-link :to="{ path: 'article'}" append></router-link>,如果没带append属性，那么就会跳到vue2.leenty.com/article下(hash模式下是vue2.leenty.com/#/article)，而现在却是跳到了vue2.leenty.com/demo/article下。这个属性用处不是很大，在特殊情况下才会用到。推荐还是把自己地址写全，不要使用相对地址，这样容易搞错另外加个小技巧，在地址前加/能保证是跳转根目录的

“tag”属性

具有tag属性的的router-link标签会被渲染为相应的标签

<router-link :to="/article" tag="li">article</router-link>

将会被渲染为

<li>article</li>

这里不需要担心li的跳转问题，vue会自动为其绑定点击事件，并跳转页面

“active-class”属性

这个属性如字面意思上说的，是设置激活链接时的class属性即是当前页面所有与当前地址所匹配的链接都会被添加这个class属性

<router-link :to="/article" active-class="u-link--Active">article</router-link>

如此，在vue2.leenty.com/article页面下(hash模式下是vue2.leenty.com/#/article)就会被渲染为

<a href="/article" class="u-link--Active"></a>

active-class属性的默认值是router-link-active,所以如果没有设置，就会被渲染为这个class

其实在上一章节有说到统一的设置这个active-class属性打开router.js文件就能看到

const router = new VueRouter({
  mode: 'hash',
  linkActiveClass: 'u-link--Active', // 这是链接激活时的class
  routes
})

“exact”属性

开启router-link的严格模式

<router-link :to="/" exact>home</router-link>

上面这个标签如果不加exact属性，则会在vue2.leenty.com/article页面下也会被匹配到，这却不是我们的本意,在加了这个属性后就会正确的匹配到vue2.leenty.com下

以上为vue-router的router-link的介绍