如上图所示，创建了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. oralce MTS

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

  2. oracle-ORA-27102错误

    out of memory HP-UX Error: 12: Not enough space ORA-30019: Illegal rollback Segment operation in Aut ...

  3. jsp内建对象的作用域

  4. UVA_10055:Hashmat the brave warrior

    Language:C++ 4.8.2 #include<stdio.h> int main(void) { long long int a, b; while(scanf("%l ...

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

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

  6. 查看JAVA占用CPU高的线程日志

    # . 查看主进程占用cpu高 top # java # . 按照线程占用cpu由高到低进行排查: -o THREAD,tid, # USER %CPU PRI SCNT WCHAN USER SYS ...

  7. Java练习 SDUT-3422_小金问呀问不会问题

    小金问呀问不会问题 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 众所周知,C语言的学习是我们程序设计基础的重点和主要 ...

  8. 洛谷 2149 [SDOI2009]Elaxia的路线

    题目描述 最近,Elaxia和w的关系特别好,他们很想整天在一起,但是大学的学习太紧张了,他们 必须合理地安排两个人在一起的时间.Elaxia和w每天都要奔波于宿舍和实验室之间,他们 希望在节约时间的 ...

  9. Python深入：修改Python搜索路径

    当Python执行import语句时,它会在一些路径中搜索Python模块和扩展模块.可以通过sys.path查看这些路径,比如: >>> import sys >>&g ...

  10. 使用DataX同步MaxCompute数据到TableStore（原OTS）优化指南

    概述 现在越来越多的技术架构下会组合使用MaxCompute和TableStore,用MaxCompute作大数据分析,计算的结果会导出到TableStore提供在线访问.MaxCompute提供海量 ...