当vue路由变化时 改变导航条式样

这个是导航栏:

<router-link to="/unusedOrder">

  <div class="">路由1</div>

</router-link>

<router-link to="/usedOrder">

  <span class="">路由2</span>

</router-link>

<router-link to="/advices">

  <span class="">路由3</span>

</router-link>

<router-link to="/evaluate">

  <span class="">路由4</span>

</router-link>

当点击路由的时候,当前元素会生成一个class为:router-link-exact-active router-link-active;

我们只需要增加router-link-exact-active或router-link-active的样式就行了

原文地址:https://www.cnblogs.com/lan-cheng/p/9217357.html

时间: 2024-10-12 13:10:52

当vue路由变化时 改变导航条式样的相关文章

【代码笔记】改变导航条标题的颜色为红色

一,效果图. 二,代码. RootViewController.m - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. [email protected]"I love you"; //改变导航条标题的颜色为红色 [self.navigationController.navigationBar setTitleTextAttributes:@{NSFo

改变导航条标题的颜色为红色

一,效果图. 二,代码. RootViewController.m - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. self.title=@"I love you"; //改变导航条标题的颜色为红色 [self.navigationController.navigationBar setTitleTextAttributes:@{NSForegro

零开始构建Angular项目----之路由配置 和 nav导航条

效果 接着上次 零开始构建Angular项目继续扯路由配置 和 nav导航条 1.增加about页面 about.component.html <!-- Docs nav ================================================== --> <div class="row"> <!-- <div class="col-md-3 "> <div class="bc-sid

VUE—路由(四)导航守卫&amp;动态路由

1.在个人中心中做个表单,当表单中有内容时,跳转到其他页面做个提醒 除了beforeRouteLeave在组件中还有其他路由函数,统称导航守卫 2.当从个人中心跳到学术讨论的时候,学术讨论页面也知道跳转进来了,这个函数叫beforeRouteEnter 原文地址:https://www.cnblogs.com/tianya-guoke/p/11509461.html

vue 路由meta 设置title 导航隐藏

router.js routes: [{ path: '/', name: 'HelloWorld', component: HelloWorld, meta: { title: "HelloWorld", 要现实的title show: true 设置导航隐藏显示 } }] App.vue <template> <div id="app"> <router-view></router-view> <bottom

VUE—路由(五)导航守卫

一.路由独享守卫 假如要守护home路径,就在router.js中home路径中设置 二.全局守卫(守卫所有路径) 加在路由整体上—>router中,router在mian.js中使用,所以先设置main.js 2.全局守卫:beforeResolve (当路由内的东西都被解析完毕时执行(一层一层都加载完的时候)) 形式与上面的router.beforeEach一样 3.router.afterEach( ) =>{   }  什么都ok时执行,没有实质意义,里面也没有参数 路由的解析流程:

鼠标下滑到一定的高度时二级导航条固定在顶部

css样式: .fixednav{ position:fixed; top:0px; left:0; width:100%; z-index:1; } jQuery js结构: $(function(){ var nav=$(".nav");//获取当前对象 var win =$(windows);//获取窗口 var do=$(document); win.scroll(function(){ if(do.scrollTop()>=100){ nav.addClass(&quo

窗口变化时改变视频的大小

$(window).on("resize", function () { vSize(); }) function vSize() { setTimeout(function () { $(".FullPageSection .videobox video").css({ "transform": "scaleY(" + ($(".videobox").height() / $(".videobo

Bootstrap入门(十三)组件7:导航条

1.默认样式的导航条 2.嵌入表单和按钮 3.嵌入文本和非导航的链接 4.组件排列和下拉菜单 5.固定在顶部/底部 6.反色的导航条 7.路径导航 首先先了解一些内容(原话): ①.导航条内所包含元素溢出 由于 Bootstrap 并不知道你在导航条内放置的元素需要占据多宽的空间,你可能会遇到导航条中的内容折行的情况(也就是导航条占据两行).解决办法如下: 减少导航条内所有元素所占据的宽度. 在某些尺寸的屏幕上(利用 响应式工具类)隐藏导航条内的一些元素. 修改导航条在水平排列和折叠排列互相转化