如上图所示，创建了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. DTcms iis6 伪静态 iis配置方法 【图解】

    1.右键点击 要设置网站的网站 2.属性 ——>主目录 ——>配置——> 3.如右侧窗口,找到 .aspx 扩展名——>编辑——>复制 可执行文件的路径——>关闭 ...

  2. JavaReflection（转载）

    平时看代码时,总是碰到这些即熟悉又陌生的名次,每天都与他们相见,但见面后又似曾没有任何的交集,所以今天我就来认识下这两个江湖侠客的背景: CLASS 在Java中,每个class都有一个相应的Clas ...

  3. 【JZOJ4805】【NOIP2016提高A组模拟9.28】跟踪

    题目描述 输入 输出 样例输入 4 2 1 3 1 2 2 3 3 4 样例输出 2 数据范围 解法 预处理出两个陌生人走到各个点的距离. 从石神处开始dfs,判断走到每一个点是否会被抓: 如果会,则 ...

  4. 【转载】获取更多/proc/fd中有关socket的信息

    Q: Looking in /proc/$mypid/fd/, I see these files lrwx------ cm_user cm_user Oct : -> /dev/pts/ ( ...

  5. bzoj2424 订货

    Description 某公司估计市场在第i个月对某产品的需求量为Ui,已知在第i月该产品的订货单价为di,上个月月底未销完的单位产品要付存贮费用m,假定第一月月初的库存量为零,第n月月底的库存量也为 ...

  6. NSString&NSMutableString常用操作梳理

    http://www.cocoachina.com/ios/20150724/12722.html 上一篇梳理了NSArray&NSMutableArray常用操作,这次来梳理一下Object ...

  7. Java练习 SDUT-2728_最佳拟合直线

    最佳拟合直线 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 在很多情况下,天文观测得到的数据是一组包含很大数量的序列点 ...

  8. Vue指令：v-for的用法；v-bind绑定class的几种写法；tab标签切换

    一.v-for 的用法 循环指令,可以遍历 Number.String.Object.Array: 循环数字.字符串:有2个参数,分别是value和索引值: 循环对象:有3个参数,分别是 属性值.属性 ...

  9. Java面向对象----方法重载

    方法重载(over load):方法名相同,参数列表不同,返回类型无关 package com.tanlei.newer; public class OverLoadDemo { public sta ...

  10. POLARDB 2.0 重磅升级，分别支持Oracle与PostgreSQL

    点击订阅新品发布会! 新产品.新版本.新技术.新功能.价格调整,评论在下方,下期更新!关注更多内容,了解更多 最新发布 POLARDB 2.0 重磅升级 2019年6月19日15时,阿里云 POLAR ...