vue全家桶（2.2）

3.3.router-link配置

3.3.1.实例

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

核心代码：App组件

路由配置：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组件

3.3.3.router-link的其他配置

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

核心代码

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

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

首页

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

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

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