对于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纯前端页面。

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