如上图所示，创建了3个路由跳转选项，css实现后的效果如下 ↓↓↓

当我切换“电影” “影院” “我的” 三个路由选项时，文字由黑色变成红色

此时可用vue自带的 router-link-active 实现切换变色

-----------------------------------------------------------------------------------------

同样的，在二级路由切换时，也可实现切换变色效果， 比如说，切换 “正在热映”，“即将上映”两个按钮的时候，实现切换变色带下划线的效果

代码实现如下：

router-link-active的作用的更多相关文章

  1. [Redux] Navigating with React Router <Link>

    We will learn how to change the address bar using a component from React Router. In Root.js: We need ...

  2. Vue router link

    html: <router-link to="test">Go to Foo</router-link> <router-link to=" ...

  3. link常用的作用

    1 引入样式 2设置网页标题上面图标

  4. react项目开发中遇到的问题

    前言 作为一个前端爱好者来说,都想在react上一试生手,那么在搭建react项目开发时,肯定会有这样或者那样的问题,尤其是对初学者来说,下面就个人在开发过程中遇到的问题总结一下,好在有google帮 ...

  5. [React] React Router: Router, Route, and Link

    In this lesson we'll take our first look at the most common components available to us in react-rout ...

  6. React Router教程

    React Router教程 React项目的可用的路由库是React-Router,当然这也是官方支持的.它也分为: react-router 核心组件 react-router-dom 应用于浏览 ...

  7. React Router学习

    React Router教程 本教程引用马伦老师的的教程 React项目的可用的路由库是React-Router,当然这也是官方支持的.它也分为: react-router 核心组件 react-ro ...

  8. < react router>: (路由)

    < react router> (路由): 思维导图: Atrial   文件夹下的index.js 文件内容: import React, { Component } from 'rea ...

  9. 用avalon实现一个完整的todomvc（带router）

    照着todomvc官网的例子,做了一个avalon版的todos,功能全都有了,而且加了router模块,比司徒大大写的都完善(≧▽≦)/~ js文件整整100行,初次使用avalon,书写过程中绕了 ...

  10. angular2 学习笔记 ( Router 路由 )

    参考 : https://angular.cn/docs/ts/latest/guide/router.html#!#can-activate-guard https://angular.cn/doc ...

随机推荐

  1. Android Bitmap缓存介绍

    转载自http://blog.csdn.net/linghu_java/article/details/8595717 Android中加载一个Bitmap(位图)到你的UI界面是非常简单的,但是如果 ...

  2. sql —— 自动增长列

    1.设置自动增长列 设置完毕添加数据这个字段就不用再手动添加了,会从10001开始,每条数据自动加1.

  3. poj 2342 hdu 1520【树形dp】

    poj 2342 给出每个顶点的happy值,还有若干组两个顶点L,K关系,表示K是L的上司.求当K.L不同时出现时获得的happy值的最大和. 设dp[u][0]表示不选u结点时获得的最大值,dp[ ...

  4. 基于颜色的R2V软件快速矢量化

    跟同学一起做SRTP,矢量化,作图的工作点名让我去做,人家说,谁让你是学地理信息的呢?哎,什么时候地理信息不再被别人当成制图画图的,我们专业就有希望了. 话虽然这么说,但工作还是要去做. (进入正题) ...

  5. python while 循环结构

  6. 是readdir,还是readdir_r

    readdir的原型如下: struct dirent *readdir(DIR *dirp); 因为内部使用了静态数据,所以readdir被认为不是线程安全的函数,POSIX[i]标准这样描述: T ...

  7. Spark JDBC系列--Mysql tinyInt字段特殊处理

    当spark取出表的scheme中,类型名为tinyint的字段,会被处理为Boolean型.而mysql中tinyint的sqlType都会默认处理为bit,所以如果数据库中的这类字段中,存储了0. ...

  8. SpringBoot-provider-JPA Not a managed type 问题分析及解决办法

    spring boot jpa-java.lang.IllegalArgumentException: Not a managed type异常问题解决方法 JPA实体类没有被扫描到,导致这样的情况有 ...

  9. Getting started with the basics of programming exercises_2

    1.编写简单power函数 #include<stdio.h> int power(int m, int n); // test power function int main(void) ...

  10. @hdu - 6372@ sacul

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 定义矩阵 \(A_i\) 是一个大小为 \(p^i*p^i\) ...