vue中router-link配置项介绍

责编:menVScode 2017-11-30 18:03 阅读(1207)

1、动态绑定

// index是变量
<router-link :to="index">home</router-link>

2、动态绑定对象形式

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

3、router-link默认是编译成a标签,需要编译成其他标签时

// router-link编译成了div标签,并能进行跳转
<router-link :to="index" tag="div">home</router-link>

    编译后结果:

<li>
    <div class="">home</div>
</li>

4、其他标签作为点击链接对象的时候

<router-link :to="job" tag="li">
  <i></i>
  <span>job</span>
</router-link>
<li>
  <router-link to="/about">about</router-link>
</li>

     编译后结果:

<li class="">
    <i></i>
    <span>job</span>
</li>
<li>
    <a href="/about" class="router-link-exact-active router-link-active">about</a>
</li>

5、导航链接被选中的时候,会有类名 router-link-active,可以设置其激活状态样式。我们也可以自定义设置类名,不使用 router-link-active 。

    全局配置:在路由配置中设置属性 linkActiveClass : ' '。

let router = new VueRouter({
  mode:'history',//默认是hash模式
  linkActiveClass:'menvscode-active',
  routes:[
    { path:'/home', component:Home },
    { path:'/about', component:About },
    { path:'/document', component:Document }
  ]
})

6、如果选中激活链接,不想要使用 router-link-active 的样式,可以在其 router-link 标签上添加属性 active-class="自定义类名"

<li>
    <router-link to="/about" active-class="activeClass">about</router-link>
</li>

7、<router-view class="center"></router-view>

会将类名center的样式添加到组件根节点的标签上(最外层标签)。

8、exact:精确匹配路劲

<router-link to="/" exact tag="div"  event="mouseover">home</router-link>

9、router-link 默认是点击触发,但也可以设置 event="mouseover" 可改为鼠标移入触发。

demo代码

<template>
  <div id="app">
    <div class="nav-box">
      <ul class="f-cb">
        <li>
          <router-link :to="index" tag="div">home</router-link>
        </li>
        <router-link :to="job" tag="li" event="mouseover">
          <i></i>
          <span>job</span>
        </router-link>
        <li>
          <router-link :to="{path:'/document'}">document</router-link>
        </li>
        <li>
          <router-link to="/about" active-class="activeClass">about</router-link>
        </li>
      </ul>
    </div>
    <router-view class="center"></router-view>
  </div>
</template>

编译后结果:

<div id="app">
    <div class="nav-box">
        <ul class="f-cb">
            <li><div class="">home</div></li>
            <li class=""><i></i> <span>job</span></li>
            <li><a href="/document" class="">document</a></li>
            <li><a href="/about" class="router-link-exact-active activeClass">about</a></li>
        </ul>
    </div>
    <div class="center">我是about</div>
</div>

效果

GIF666

标签: router-link vue
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码