如上图所示，创建了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. Spring_Aop基于配置文件

    <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...

  2. springboot集成mongoDB 异常认证

    1.springboot连接mongoDB 出现异常认证 异常详情: com.mongodb.MongoSecurityException: Exception authenticating Mong ...

  3. PyChram创建虚拟环境

    目录 1. python创建虚拟环境 2. pycharm中添加python虚拟环境 1. python创建虚拟环境 首先要安装virtualenv模块.打开命令行,输入pip install vir ...

  4. 【JZOJ4868】【NOIP2016提高A组集训第9场11.7】Simple

    题目描述 数据范围 解法 在暴力枚举的基础上,当n的系数在[0,m/gcd(n,m))时,得到的c是不重复不遗漏的. 设n的系数为x,m的系数为y. 不重复不遗漏性 设x=m/gcd(n,m)+i,那 ...

  5. 字节缓冲流 ( BufferedInputStream / BufferedOutputStream)

    package com.sxt.reader; import java.io.BufferedInputStream; import java.io.BufferedOutputStream; imp ...

  6. codeblocs的安装使用

    安装后,上面菜单栏 点击“Setting --> Compiler” "Creat a new project"

  7. Android 监听软键盘搜索键

    现在很多的Android应用都有了数据搜索功能,在以往的设计上,会使用搜索框+搜索按钮来实现搜索功能: 现在呢,越来越流行的是,去除搜索按钮,直接监听软键盘搜索键,当用户输入完搜索关键字后,直接点击软 ...

  8. 容器服务kubernetes federation v2实践五：多集群流量调度

    概述 在federation v2多集群环境中,通过前面几篇文章的介绍,我们可以很容易的进行服务多集群部署,考虑到业务部署和容灾需要,我们通常需要调整服务在各个集群的流量分布.本文下面简单介绍如何在阿 ...

  9. [kuangbin带你飞]专题九 连通图B - Network UVA - 315

    判断割点的性质: 如果点y满足 low[y]>=dfn[x] 且不是根节点 或者是根节点,满足上述式子的有两个及其以上. 就是割点 如果是起点,那么至少需要两个子节点满足上述条件,因为它是根节点 ...

  10. oracle避免使用耗费资源的操作

    带有DISTINCT,UNION,MINUS,INTERSECT,ORDER BY的SQL语句会启动SQL引擎 执行耗费资源的排序(SORT)功能. DISTINCT需要一次排序操作, 而其他的至少需 ...