Vue-设置默认路由选中
需求分析:
一个导航组件,需要其中一个是选中状态,并且样式呈现高亮,选中的导航对应的页面也需要展示出来。
功能实现:
router-link内置有一个选中状态,当处于当前路由时,会给 router-link 标签加一个类名 router-active-class;
同时还提供有一个 exact 属性,当加了 exact 属性的时候表示精确匹配,也就是会精确匹配 Url,所以如果给主路由设置了 exact 属性的话,当处于子路由时,Url 就匹配不到主路由了,那么主路由也就不会处于选中状态;
所以如果想主路由和子路由都处于选中时不用设置 exact 属性。
标签: router-link //在页面中会解析为我们熟系的 a 标签
类:router-active-class //在这个类名下设置路由选中的高亮样式
属性:exact //精准匹配路由
路由:
routes: [
{
path: '/page1',
name: 'Page1',
component: Page1
} ,
{
path: '/page2',
name: 'Page2',
component: Page2,
children:[
{
path: '/chil1',
name: 'Chil1',
component: Chil1
},
{
path: '/chil2',
name: 'Chil2',
component: Chil2
}
]
},
{
path: '/page3',
name: 'Page3',
component: Page3
}
]
html:
<router-link to="/父路由的地址名字/要去的子路由的名字"></router-link>
css:
.router-active-class{
color: #fff,
background-color: red
}
Vue-设置默认路由选中的更多相关文章
- linux设置默认路由细节问题
在这里,我想给大家讲解下,linux系统默认路由的设置的一些细节问题.这样在设置多块网卡的时候如何设置路由可以为初学者少走一些弯路. 默认情况下配置多块网卡,每个网卡都要配置ip,每个ip又是在不 ...
- vue设置默认地址和配送方式
1.截图 2.address.html <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- vue-router 设置默认路由
加入 {path: '/', redirect: 'ratings'},vue 1.0版本版本使用go,但是在2.0中是用router.go(‘/ratings’);会一直刷新
- yii2.0 设置默认路由
在config/web.php 添加 $config = [ 'defaultRoute' => 'login/login', ];
- 每天一点点之vue框架开发 - vue-router路由进阶(路由别名、跳转、默认路由、二级路由、路由守卫)
路由别名 在main.js中的路由中添加name来创建别名 const routes = [ {path:'/footer',name:footerLink,component:Footer} ] ...
- CCNP第一课:默认路由(路由黑洞,路由终结)
一:功能实现 R1的环回口由R3控制下放,下放之后R4才可以ping通 代码: R1: 只需要一条静态路由,能回包就行了 ip route 20.1.1.0 255.255.255.0 10.1.1. ...
- 网络地址转换(NAT)和默认路由
我们要连接外网时,外网的网段很多很多,我们该如何愉快地连接外网?下面我们通过Cisco packet模拟环境,并了解NAT和默认路由的使用: NAT(Network Address Translati ...
- IT菜鸟之路由器基础配置(静态、动态、默认路由)
路由器:连接不同网段的设备 企业级路由和家用级路由的区别: 待机数量不同(待机量) 待机量:同时接通的终端设备的数量 待机量的值越高,路由的性能越好 别墅级路由,表示信号好,和性能无关 交换机:背板带 ...
- Vue Echarts 饼图设置默认选中一个
Vue Echarts 饼图设置默认选中一个 myChart.setOption(data) // data伟echarts所需要传入的参数,就是配置参数最多的那个玩意 myChart.dispatc ...
随机推荐
- 月薪20k的web前端开发程序员,他们都会的这6招
web前端工程师是近几年的新兴职业,也是目前火爆而且高薪的职业.不同的公司也有不同的叫法,比如:网页界面开发,网站设计等,要学好web前端开发,需要掌握什么方法与技巧? 一.div和table 这个是 ...
- HTML文字标签
<h1>标题标签,总共六个等级,不能创造标签,只有预定义好的标签才可以被浏览器解析 <br>换行标签,没有内容可以修饰也称为空标签 <p>段落标签</p> ...
- 在EF中使用原生SQL,首先要创建上下文对象
using (var db = new Entities()) { //数据操作 } 新增 string sql = "insert into UserInfo values('zhangs ...
- Apache Kafka(二)- Kakfa 安装与启动
安装并启动Kafka 1.下载最新版Kafka(当前为kafka_2.12-2.3.0)并解压: > wget http://mirror.bit.edu.cn/apache/kafka/2.3 ...
- Led Night Light Factory: Traveler Led Night Light
Wake up in a strange hotel room in the evening and find the way to the bathroom, without stepping on ...
- java 中使用logback日志,并实现日志按天分类压缩保存。
以maven项目作为构建工具为例,首先引入使用logback需要的3个依赖,需要注意使用logback是需要引入slf4j-api的,因为logback是基于slf4j的 <!--logback ...
- Sql Server跨服务器操作数据
var serversSql = "select count(*) count from sys.servers WHERE name='ITSV'"; var result = ...
- 微信小程序UDP通信
前言 UDP通信分为单播 广播 组播,基础库2.7.0之后,小程序开始支持UDP通信,目前小程序只支持单播. 小程序API 小程序UDP通信这一块可以说是很简单了就一个UDPSocket实例.然后bi ...
- 【资源分享】Gmod-Expression2 - 自定义像素画生成
*作者:BUI* 可自定义制作属于你的像素画(默认为Sans) 第77行的COLOR可编辑你想要的颜色(RGB值) 1,2,3,4分别代表第77行所定义的颜色(0代表不显示) 视频地址:传送链接 @n ...
- sublime-text3 安装 emmet 插件
下载sublime,http://www.sublimetext.com/ 安装package control :https://packagecontrol.io/ins... 这个地址需要翻墙,访 ...