vue在路由过程中，改变导航栏的单个点击样式的问题。

最新推荐文章于 2024-07-03 18:01:25 发布
最新推荐文章于 2024-07-03 18:01:25 发布
阅读量1.1w 收藏 5
点赞数 10
分类专栏： vue css布局 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/limy_cxm/article/details/73527968
版权

当我们做一个公共底部组件，类似于tab选项卡或者导航栏，单击路由到另外一个组件上的时候，我们改变当前路由的样式问题，并且返回，样式不会初始化，因为他是由路由决定的
如果导航栏全部都是由router-link包含跳转的话，有一个非常好的方法
router-link-active
—-.router-link-active这个class，是当路由path指向当前组件时自动生成的，可以在此处设置样式（选中状态）

limy_cxm
关注
  • 10
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue 公用导航路由切换 改变样式
qq_33646205的博客
04-16 1418
<template> <div class="tabbar"> <router-link v-for="(item, index) in navlist" :to="item.url" @clik.native="linkTo(item.url)" exact> <img v-if="$route.path.indexOf...
vue点击按钮实现简单页面的切换
12-28
本文实例为大家分享了vue点击按钮实现页面切换的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html> <head> <meta charset=utf-8> <title></title> [removed][removed] </head> <body> 首页 新闻页 <h3 v-show=ta
vue 设置 router-link 的链接样式颜色
最新发布
qq_33240556的博客
07-03 263
在 Vue 中，要设置组件的链接样式颜色，你可以通过 CSS 来定制不同状态下的颜色。
当vue路由变化时，改变导航栏的样式的方法
qq_40885461的博客
03-26 3497
当我们需要做一个类似于顶部或者底部导航栏公共组件的时候，单击某个导航栏按钮，跳转到另一个组件，并且改变导航栏的样式。 1) 通过编程式导航实现路由的切换显示($router) 相关API: this.$router.push(path): 相当于点击路由链接(可以返回到当前路由界面) this.$router.replace(path): 用新路由替换当前路由(不可以返回到当前路由界面) ...
Vue项目总结（1）--- 在不同路由下，组件样式需要改变的解决方案，动态监听路由变化。
Dwyane1279的博客
10-23 1260
在项目中遇到一个问题，当进入不同的路由时，根组件的导航栏颜色需要改变。 在主界面时，导航栏样式应为： 在其他界面时，导航栏样式应为： 最初解决方案： 一开始想到的解决方案是，当其他界面的组件创建时，向根组件传递数据，改变导航栏样式(导航栏写在了根组件中)。 弊端：①实现起来比较困难；②需要给许多组件配置这个方案，很麻烦 最终解决方案： 通过v-bind指令动...
VUE，关于导航列表样式切换（VUE Router：router-link-active）
weixin_33811961的博客
04-15 906
当我们新建一个网站时，总是要做一个导航列表，在传统的WEB开发中这已经是一种很成熟的技术，自己学VUE，看了官方文档，加上自己摸索，也学到不少，现在拿来分享一下。在自己VUE入门学习的笔记中也有提及第一种：JQUERY中我们通常采用: $("li[class='active']").removeClass("active"); //将...
Vue 菜单栏点击切换单个class(高亮)的方法
10-18
在Vue.js中，实现菜单栏点击切换单个class（高亮）的功能是常见的需求，尤其是在构建具有导航功能的Web应用时。以下是一种简单而有效的方法： 首先，我们需要在Vue实例的数据属性中定义一个变量，用于存储当前选中...
vue自定义底部导航栏Tabbar的实现代码
10-18
在 Vue 中实现自定义底部导航栏（Tabbar）是常见的需求，特别是在开发移动应用时。这里我们将详细介绍如何使用 Vue 实现底部导航栏，包括创建组件、传递数据和处理路由切换。 首先，自定义底部导航栏通常由多个可...
vue框架实现加班统计功能
11-15
在这个加班统计功能中，`App.vue`将作为主容器，可能包含导航栏和路由视图，用于展示不同的加班统计页面。 子路由router的实现是通过Vue Router，这是一个官方的路由管理库。在`src/router/index.js`中，我们需要...
vue2.x实现完整点餐系统，深入学习笔记
05-04
路由独享守卫则是在单个路由配置中通过beforEnter来设置，而组件内守卫则是在组件内部通过beforeRouteEnter、beforeRouteUpdate和beforeRouteLeave这三个钩子函数来实现，分别对应于进入路由前、在当前路由改变时、...
一文了解vue-router之hash模式和history模式
10-16
本文的主题是关于Vue.js中用于前端路由管理的库vue-router的两种路由模式：hash模式和history模式。它们是vue-router提供的两种主要的导航方式，各有特点，适用于不同的场景和需求。 首先，让我们详细了解一下hash...
vuecli 实现导航切换
weixin_47906106的博客
03-16 1578
cnpm及vuecli3安装 首先先去安装node.js,安装完之后就可以直接使用npm了,因为npm是node的一个包的管理工具 安装成功后 全局安装脚手架(快速的搭建项目) npm install -g @vue/cli 创建vuecli3项目 vue create 工程名 Linter/Formatter 代码规范这里先不选 这里Y 以便去除路由中的#号 然后一致默认就可以创建成功 改变vuecli3的首页显示 components下新建one.vue index.js中定义路由 im
vue单击激活类实现
Dzb1993的博客
02-17 693
单击其中一个 背景变为绿色，其他为白色 给每个li 定义单击事件 动态绑定类 :class判断data中对应的变量不为空 就绑定类 定义单击事件 ， 单击对应li ， 给li绑定的变量设置值，其他两个对应的变量清空 ...
vue写footer导航，点击哪个让哪个变色并路由跳转（router-link-active的作用）以及vue路由的重定向。。
我只是个很菜的前端
09-01 2452
vue写footer导航，让其点击哪个让哪个的颜色变成红色（router-link-active的作用）。 vue footer 路由跳转并变色
Vue之栏父组件跳转子路由后当前导航active样式消失问题
HZKang的博客
02-09 6432
举个栗子，导航栏如下图，当前新闻资讯的路由是：localhost:8083/#/new，导航栏样式如图所示： 随便挑个新闻点击后会跳转到子路由：localhost:8083/#/new/newDetail，这时候新闻资讯的主路由style样式出现消失的问题，如下图： style代码： .router-link-exact-active{ color: #8fc526!impo...
vue中如何实现样式之间的切换
热门推荐
积少成多
02-08 3万+
欢迎访问我的个人博客 http://xiaolongwu.cn/ 前言 既然我们选择了vue，那么在做东西时就不要想着再jQuery用去操作dom，所有的都交给vue来解决。 下面来说一个很简单但是很常用的效果，可能人人都会遇到这样的需求 请看下图 导航栏的样式切换功能，如果我们使用jquery之类的东西来写，可能要写好多代码，那么我们用vue呢， 代码如下 ht...
vue单一组件下动态修改数据时的全部重渲染
MrZZhou的博客
06-04 1万+
今天在学习vue的过程中，发现一个有趣的现象 在某一组件下的某一数据通过点击事件被动态修改的时候，对应view中的数据同步的进行了修改，没错，这不是废话吗，vue的一大特色就是数据的双向绑定。可有趣的是，该组件下我写的另一个用Math.random()的data值对应的值和视图也发生了变化 这就让我这个刚入门的小白有点奇怪了，我修改一个，怎么变了两个？？？？.........脑洞放开一想，会不会数
vue.js 底部导航栏 一级路由显示 子路由不显示
LeachZhou的博客
06-21 6964
最近利用vue第三方UI MuseUI开发webapp，然后在导航栏这里出现了问题，我需要在导航栏上的几个路由上显示底部导航栏，在其他路由上不显示，就这个问题，MuseUI的底部导航栏直接加载在app.vue里面，会每个页面都有导航栏，所以这种方式不可行，后来我真的使出了浑身解数，去MuseUI作者GitHub上面提问，无果，去segmentfault上面提问，无果，去vue官方群提问，无果，在提问
vue中的路由及自定义图标
u012086400的专栏
12-03 1万+
效果如图所示：安装vue-router：npm install vue-router --save 底部选项卡：使用的是：MUI中的 tab bar(选项卡) 下载mui:[mui](https://github.com/dcloudio/mui),将其中的dist文件夹放到项目中的static文件夹下 核心文件引入：在main.js文件中引入： // 引入路由 import VueRouter f
vue3路由变化时,改变导航栏样式
04-07
在Vue3中，可以使用Vue Router的导航守卫来检测路由变化并改变导航栏的样式。 在路由组件中，可以通过编写beforeRouteUpdate守卫来检测路由变化： ``` beforeRouteUpdate (to, from, next) { // 在这里可以根据to和from对象判断路由变化，并改变导航栏的样式 next() } ``` 在App.vue中，可以使用Vue Router的全局前置守卫beforeEach来检测路由变化： ``` import { createRouter, createWebHistory } from 'vue-router' const router = createRouter({ history: createWebHistory(), routes: [...] }) router.beforeEach((to, from, next) => { // 在这里可以根据to和from对象判断路由变化，并改变导航栏的样式 next() }) ``` 在以上代码中，可以根据to和from对象的属性来判断路由变化，然后改变导航栏的样式。例如，可以根据to.path来判断当前路由路径，然后根据需要改变导航栏的样式。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值