vue2.0中router-link详解

vue2.0中router-link详解

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

  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
    }
]
*/

  1. tag 类型: string 默认值: “a” 。 如果想要 渲染成某种标签,例如
  2. 。 于是我们使用 tag prop 类指定何种标签,同样它还是会监听点击,触发导航。
      Home
      

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

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

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

  1. exact-active-class 类型: string ,默认值: “router-link-exact-active” 配置当链接被精确匹配的时候应该激活的 class。注意默认值也是可以通过路由构造函数选项 linkExactActiveClass 进行全局配置的。
  2. 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 属性后,则在当前 (相对) 路径前添加基路径

    你可能感兴趣的:(Vue.js)