Vue学习笔记router-link

组件支持用户在具有路由功能的应用中点击导航。通过to属性指定目标地址，默认渲染为带有正确连接的标签，可以通过配置tag属性生成别的标签。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的css类名
组件的属性有：
1、to（必选参数）：类型string/location
表示目标路由的链接，该值可以是一个字符串，也可以是动态绑定的描述目标位置的对象
如下几种示例

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

2、tag

类型: string

默认值: "a"

如果想要 渲染成某种标签，例如

。 于是我们使用 tag prop 类指定何种标签，同样它还是会监听点击，触发导航。

Home
      

3、active-class

类型: string

默认值: "router-link-active"

设置 链接激活时使用的 CSS 类名。默认值可以通过路由的构造选项 linkActiveClass 来全局配置。

about

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

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

4、exact-active-class
类型: string
默认值: "router-link-exact-active"
配置当链接被精确匹配的时候应该激活的 class。注意默认值也是可以通过路由构造函数选项 linkExactActiveClass 进行全局配置的。

5、exact
类型: boolean
默认值: false
"是否激活" 默认类名的依据是 inclusive match (全包含匹配)。 举个例子，如果当前的路径是 /a 开头的，那么 也会被设置 CSS 类名。
按照这个规则，每个路由都会激活！想要链接使用 "exact 匹配模式"，则使用 exact 属性：

 
全局匹配
        
严格匹配

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

document

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

8、append
类型: boolean
默认值: false
设置 append 属性后，则在当前 (相对) 路径前添加基路径