对于Vue-cli的路由跳转以及使用vue.js动态修改CSS样式

本人系前端小白，如有不对的地方轻喷，只是写自己总结下来的一些简单应用。

• 路由跳转的两种基本方式
• 动态修改class名

---

路由跳转的两种基本方式

第一种：页面级跳转

首先，页面跳转需要两个组件，例如首页为login.vue，需要跳转的页面为message.vue

在router文件夹下的main.js注册组件。

import Vue from 'vue'
import Router from 'vue-router'
import login from '@/components/login'
import messagefrom '@/components/message'

Vue.use(Router);

export default new Router({
    routes: [
        {
          path: '/',
          name: 'login',
          component: login
        },
        {
          path: '/message',      //设置跳转
          name: 'message',
          component: message
        }
    ]
})

然后再在需要添加跳转链接的html元素标签周围添加<router-link to="/message"></router-link>如

    <router-link to="/message">
            <span>登录</span>
    </router-link>

然后span标签就会被渲染为<a>标签，点击后就会执行跳转，这是页面地址后面就会有/message，字样，页面也会跳转至你书写的message了。

第二种：Tab跳转

第二种跳转是指在一个页面执行点击操作会切换其中一块区域，这也是vue的一项强大的功能，有两种跳转方式，一种是运用<router-link to="/"></router-link> 将一些标签渲染为a标签，另外一种就是使用vue动态切换class了，待会介绍。

这里就需要三个.vue文件了，我用我写的一个项目作为演示，先看下效果。

这样就完成了一次跳转，同页面的跳转需要 <router-view></router-view> 这个标签的含义是跳转后要显示的区域，部分代码：

<template>
  <div>
    <div class="mianMianBan" >
       <div class="test-box clearfix">
          <router-link to="/Message">                  <!--跳转链接-->
            <div class="test-tab fl">
              <i class="test fa fa-wechat op"></i><br> <!--font-awesome图标-->
              <span class="sanjiao op">&#9650</span>   <!--三角形-->
            </div>
          </router-link>
          <router-link to="/Friends">
            <div class="test-tab fl"}">
              <i class="test fa fa-address-card-o op"></i><br>
              <span class="sanjiao op">&#9650</span>
            </div>
          </router-link>
          <router-link to="/onLineWord">
            <div class="test-tab fl">
              <i class="test fa fa-file-o op"></i><br>
              <span class="sanjiao op">&#9650</span>
            </div>
          </router-link>
        </div>
      </div>
    <router-view></router-view>
    </div>
  </div>

<script>
import Firends from './Friends.vue'
import Message from './Message.vue'
import onLineWord from './onLineWord.vue'  //引入

  export default {
    components:{
      Firends,  //注册
      Message,
      onLineWord,
    }
  }
</script>

这样就完成了页面内部的跳转，很像Tab的效果，但是如果是特别小的一个tab呢，在使用这个就太麻烦了，接下来介绍另外一种方法，使用vue.js动态修改样式。

使用vue.js动态修改class样式

同样简单，同样还是先看效果

既能动态切换class还能实现小tab的切换，特别好用，直接上代码

<div class="friend-tab">
   <span @click="friends = 1,groups =2,chatManyPeople = 2" :class="{ 'border-b':friends === 1,'border-none':friends === 2 }">好友</span>
   <span @click=",friends = 2groups = 1,chatManyPeople = 2" :class="{ 'border-b':groups === 1,'border-none':groups === 2  }">群</span>
    <span @click="friends = 2,groups = 2,chatManyPeople = 1" :class="{ 'border-b':chatManyPeople === 1,'border-none':chatManyPeople === 2  }">多人聊天</span>
</div>

<!--Tab-->
<div class="friend-list" :class="{ 'visible':friends === 1,'hidden':friends === 2 }"></div>
<div class="groups ":class="{ 'visible':groups === 1,'hidden':groups === 2 }"></div>
<div class="chatManyPeople" :class="{ 'visible':chatManyPeople === 1,'hidden':chatManyPeople === 2 }"></div>

解释：
：class绑定class类名，可以与class名共存，也就是说即使你再这个标签书写其他class，:class依然生效，单引号内容就是class对应的样式，使用 : 将他与属性名绑定，属性名 === 1 的时候，单引号内的样式生效，属性名 === 2的时候，对应的样式生效， @click=”“就是在当前元素被点击后属性更改为XX，可以是数字也可以是英文。

那下面的tab是如何切换的呢，tab下同样有 :class 但是没有@click=”“，因为tab的样式通过点击上面三个<span></span>会一起切换，绑定的属性不同，但是样式不同，所以可以切换不同的样式，非常方便。

当然，还需要默认的样式，我们需要在 <script></script>标签内书写以下内容：

<script>
export default {
  data(){
    return{
      friends:1,//返回值为1，该元素的样式为与属性为1的样式
      groups:2,//返回值为2，该元素的样式为与属性为2的样式
      chatManyPeople:2//返回值为2，该元素的样式为与属性为2的样式
    }
  }
}
</script>

顺便把css样式也贴出来

<style>
  .border-b{
    border-bottom: 2px solid #4598FF;
    color: #3A3A3A;
  }
  .border-none{
    border-bottom: 2px solid transparent;
    color: #767676;
  }
  .hidden{
    visibility: hidden;
  }
  .visible{
    visibility: visible;
  }
</style>

项目我只放在码云上了，供跟我一样学习vue-cli的同仁们参照， 基于vue-cli搭建的仿TIM纯前端页面。

觉得有用的话请帮我的项目点心，谢谢。