vue2.0中router-link详解

<router-link>组件支持用户在具有路由功能的应用中点击导航。通过to属性指定目标地址，默认渲染为带有正确连接的<a>标签，可以通过配置tag属性生成别的标签。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的css类名.
<router-link>组件的属性有：to 、replace、 append、 tag、 active-class、 exact 、 event、 exact-active-class

to（必选参数）：类型string/location 表示目标路由的链接，该值可以是一个字符串，也可以是动态绑定的描述目标位置的对象

//下面是字符串的形式
<router-link to="home">Home</router-link>
 
//下面几种为动态绑定，v-bind: 可以简写为:
 
 
<router-link :to="'index'">Home</router-link>
 
/*但注意这个组件的导出需要有类似下面的代码
export default {
  name: 'App',
  data(){
    return {
      index:'/'
    }
  }
}
*/
 
<router-link :to="{ path: '/home' }">Home</router-link>
/*
这个路径就是路由中配置的路径
*/
<router-link :to="{ name: 'User'}">User</router-link>
/*
  在路由的配置的时候，添加一个name属性，例如：
 routes: [
    {
      path:'/home',
      name:'User',
      component:home
    }
]
*/

tag 类型: string 默认值: “a” 。如果想要 <router-link>渲染成某种标签，例如<li>。于是我们使用 tag prop 类指定何种标签，同样它还是会监听点击，触发导航。

      <router-link :to="'index'"
                   tag="li"
                   event="mouseover">Home
      </router-link>

active-class 类型: string ，默认值: “router-link-active”
设置链接激活时使用的 CSS 类名。默认值可以通过路由的构造选项 linkActiveClass 来全局配置

<router-link :to="{path:'/about'}"
                   active-class="activeClass"                  
      >about</router-link>

默认值通过路由的构造选项 linkActiveClass 来全局配置,如下示例：

export default new Router({
  mode:'history',
  linkActiveClass:'is-active',
  routes: [
    {
      path:'/about',
      component:about
    }
]
})

exact-active-class 类型: string ，默认值: “router-link-exact-active” 配置当链接被精确匹配的时候应该激活的 class。注意默认值也是可以通过路由构造函数选项 linkExactActiveClass 进行全局配置的。
exact 类型: boolean ，默认值: false “是否激活” 默认类名的依据是 inclusive match (全包含匹配)。举个例子，如果当前的路径是 /a 开头的，那么也会被设置 CSS 类名。按照这个规则，每个路由都会激活<router-link to="/">！想要链接使用 “exact 匹配模式”，则使用 exact 属性：

        <li><router-link to="/">全局匹配</router-link></li>
        <li><router-link to="/" exact>严格匹配</router-link></li>

简单点说，第一个的话，如果地址是/aa,或/aa/bb，……都会匹配成功，
但加上exact，只有当地址是/时被匹配，其他都不会匹配成功
6. event 类型: string | Array<string>，默认值: ‘click’，声明可以用来触发导航的事件。可以是一个字符串。

<router-link to="/document" event="mouseover">document</router-link>

如果我们不加event，那么默认情况下是当我们点击document的时候，跳转到相应的页面，但当我们加上event的时候，就可以改变触发导航的事件，比如鼠标移入事件
7. replace 类型: boolean ，默认值: false 设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，于是导航后不会留下 history 记录。
8. append 类型: boolean，默认值: false，设置 append 属性后，则在当前 (相对) 路径前添加基路径

vue2.0中router-link详解

vue2.0中router-link详解

悦读