如上图所示，创建了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. Permutations II 去掉重复的全排列

    Given a collection of numbers that might contain duplicates, return all possible unique permutations ...

  2. oralce MTS

    MTS的组件包括: processes on the system. communication software. the shared global section (SGA).          ...

  3. Django Rest Framework Serializer的简单使用

    1.RESTful 1.1 定义 REST(Representational State Transfer)与技术无关,代表一种软件架构风格,中文为表征状态转移. 1.2 RESTful API设计 ...

  4. 【JZOJ4869】【NOIP2016提高A组集训第9场11.7】平均数

    题目描述 数据范围 解法 二分答案. 对于一个答案mid,要求出区间平均数小于mid的个数ans. 给所有数减去mid,那么问题转化为求出所有区间和为负数的个数. 对于一个区间[l,r],如果sum[ ...

  5. 直击 KubeCon 2019 现场，阿里云 Hands-on Workshop 亮点回顾

    2019 年 6 月 24 日,KubeCon + CloudNativeCon 第二次在中国举办.此次大会阿里共有 26 个技术演讲入选,并有两场沙龙活动,阿里云专家也与技术极客们也再次相聚.Kub ...

  6. WebForms UnobtrusiveValidationMode 需要“jquery”ScriptResourceMapping 的解决方法

    问题描述:VS2012使用验证控件出现“ WebForms UnobtrusiveValidationMode 需要“jquery”ScriptResourceMapping.请添加一个名为 jque ...

  7. 基于PyTorch的Seq2Seq翻译模型详细注释介绍（一）

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/qysh123/article/detai ...

  8. 【datagrid】动态加载列 2016-01-03 16:32 2013人阅读 评论(19) 收藏

    之前我们的项目在前台显示只需要把数据从数据库读出来进行显示就可以,datagrid的表头字段都是写死的,把数据往表里一扔,就基本没什么事儿了,结果客户前几天要求,其中一个字段不能是死的,应该是有多少项 ...

  9. QT开发ROS遇到问题：execute_process(/usr/bin/python"/home/fu/catkin_ws/build/catkin_genetated/generate_cached_setup.py)..........

    具体如上图显示,网上给的方法是重装ros和重新创建ROS工作空间.经过这样做以后发现问题依然存在. 最后考虑可能是没有加载ROS的环境变量.(我的qtcreator中已经有了创建ros工程的项目,但是 ...

  10. Knative Eventing 中如何实现 Registry 事件注册机制

    摘要: 在最新的 Knative Eventing 0.6 版本中新增了 Registry 特性, 为什么要增加这个特性, 该特性是如何实现的.针对这些问题,希望通过本篇文章给出答案. 背景 作为事件 ...