vue全家桶（2.2）

3.3.router-link配置

3.3.1.实例

需求：实现下面效果，点击不同的菜单，显示不同的文字

核心代码：App组件

<template>
  <div id="app">
    <div class='page'>
      <ul>
        <li><a href="#/">首页</a></li>
        <li><a href="#/course">课程</a></li>
        <li><a href="#/vip">会员</a></li>
        <li><a href="#/question">问答</a></li>
      </ul>
    </div>
  </div>
</template>

<script>

export default {
  name: 'App',
  components: {

  }
}
</script>

<style scoped>
.page {
  width: 100%;
  background-color: black;
  color: white;
  text-align: center;
  font-size: 20px;
  height: 60px;
  line-height: 60px;
}
ul, li {
  margin: 0;
  padding: 0;
}
ul {
  margin-left: 200px;
  overflow: hidden;
}
li {
  list-style: none;
  float: left;
}
li a{
  padding: 20px 30px;
  color: white;
  font-size: 14px;
  text-decoration: none;
}
li a:hover{
  background-color: orangered
}

</style>

路由配置：index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/components/Home'
import Course from '@/components/Course'
import Question from '@/components/Question'
import Vip from '@/components/Vip'

// 让vue-router作为vue的插件使用
Vue.use(VueRouter)

// 配置路由信息
const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/course',
      component: Course
    },
    {
      path: '/vip',
      component: Vip
    },
    {
      path: '/question',
      component: Question
    }
  ]
})

export default router

3.3.2.使用router-link实现跳转

核心代码：App组件

<template>
  <div id="app">
    <div class="page">
        <ul>
          <li><router-link to="/">首页</router-link></li>
          <li><router-link to="/course">课程</router-link></li>
          <li><router-link to="/vip">会员</router-link></li>
          <li><router-link to="/question">问答</router-link></li>
        </ul>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  name: 'App',
  components: {

  }
}
</script>

<style scoped>
.page {
  width: 100%;
  background-color: black;
  color: white;
  text-align: center;
  font-size: 20px;
  height: 60px;
  line-height: 60px;
}
ul, li {
  margin: 0;
  padding: 0;
}
ul {
  margin-left: 200px;
  overflow: hidden;
}
li {
  list-style: none;
  float: left;
}
li a{
  padding: 20px 30px;
  color: white;
  font-size: 14px;
  text-decoration: none;
}
li a:hover{
  background-color: orangered
}

</style>

3.3.3.router-link的其他配置

1.可以动态绑定一个变量

核心代码

<template>
  <div class="page">
      <ul>
        <li><router-link :to="index">首页</router-link></li>
        <li><router-link :to="course">课程</router-link></li>
        <li><router-link :to="vip">会员</router-link></li>
        <li><router-link :to="question">问答</router-link></li>
      </ul>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  data () {
    return {
      index: '/',
      course: '/course',
      vip: '/vip',
      question: '/question'
    }
  }
}
</script>

2.默认router-link生成的是a标签，可以更改成其他标签, 使用tag来设置

<template>
  <div id="app">
    <div class="page">
        <ul>
          <li><router-link :to="index" tag="div">首页</router-link></li>
          <li><router-link :to="course" tag="div">课程</router-link></li>
          <li><router-link :to="vip" tag="div">会员</router-link></li>
          <li><router-link :to="question" tag="div">问答</router-link></li>
        </ul>
    </div>
  </div>
</template>

3.设置router-link的激活样式

第一种方式，在全局配置一个linkActiveClass

// 配置路由信息
const router = new VueRouter({
  //设置激活样式
  linkActiveClass: 'nav-active',
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/course',
      component: Course
    },
    {
      path: '/vip',
      component: Vip
    },
    {
      path: '/question',
      component: Question
    }
  ]
})
```js
第二种方式，直接在router-link上增加active-class

```js
<li><router-link :to="index" active-class="nav-active">首页</router-link></li>

4.设置渲染组件的公共样式，可以直接在router-view上增加class

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

5.可以更改切换的事件，默认是鼠标点击切换,通过设置event实现

<template>
  <div id="app">
    <div class="page">
        <ul>
          <li><router-link :to="index" active-class="nav-active" event="mouseover">首页</router-link></li>
          <li><router-link :to="course" event="mouseover">课程</router-link></li>
          <li><router-link :to="vip" event="mouseover">会员</router-link></li>
          <li><router-link :to="question" event="mouseover">问答</router-link></li>
        </ul>
    </div>
  </div>
</template>

螺钉课堂视频课程地址：http://edu.nodeing.com