如上图所示，创建了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. JavaEE架构简介与JavaWeb新特性

    Fragment 将一个web应用做成几个部分,然后整合 创建Fragment项目   然后打包放入Servlet项目中的WEB-INF下的lib中 注解 @WebServlet @WebServle ...

  2. 【JZOJ4786】【NOIP2016提高A组模拟9.17】小a的强迫症

    题目描述 输入 输出 样例输入 3 2 2 1 样例输出 3 数据范围 样例解释 解法 先假定每种颜色的珠子取一个按顺序排列. 设这n个珠子就是每一种颜色的珠子的最后一个. 考虑逐个把珠子放入. 对于 ...

  3. 两种RBAC权限控制模型详解

    序言 由于最近一直卡在权限控制这个坎上,原来设计的比较简单的权限控制思路已经无法满足比较复杂一些的场景,因此一直在探索一种在大部分场景下比较通用的权限模型. 首先,这里说明一下两种RBAC权限模型分别 ...

  4. Codeforces 432C

    题目链接 题意: 给出一个长度为n(n<=10^5)的数组a,  数组a是数字1到n的一种排列(打乱顺序). 每次可以选择两个数(不同)进行交换, 但是交换的条件是被选择的两个数的下标之差加1应 ...

  5. 介绍配置管理工具SVN的使用

    配置管理CM(Configuration Mangerment) 一.配置管理工具SVN的介绍 ---Subversion ---是一个开放源代码的版本控制系统 ---时下流行的SVN和GIT 每天开 ...

  6. Python学习之路2☞数据类型与变量

    变量 变量作用:保存状态:说白了,程序运行的状态就是状态的变化,变量是用来保存状态的,变量值的不断变化就产生了运行程序的最终输出结果 一:声明变量 #!/usr/bin/env python # -* ...

  7. HZOJ 巨神兵

    60pts: 每个DAG的拓扑序是唯一的,所以考虑将DAG分层.f[i][j]记录当前选择的节点状态是i,最后一层的节点状态为j(dep取最大). 初始状态:$f[i][i]=1;i\in [1,1& ...

  8. python MySQLdb用法，python中cursor操作数据库（转）

    数据库连接 连接数据库前,请先确认以下事项: 您已经创建了数据库 TESTDB. 在TESTDB数据库中您已经创建了表 EMPLOYEE EMPLOYEE表字段为 FIRST_NAME, LAST_N ...

  9. mysql数据库之工作流程

    MySQL架构总共四层,在上图中以虚线作为划分. 首先,最上层的服务并不是MySQL独有的,大多数给予网络的客户端/服务器的工具或者服务都有类似的架构.比如:连接处理.授权认证.安全等. 第二层的架构 ...

  10. 12-2 js基础

    一 数据类型 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...