VUE通过route实现点击切换背景图片

最新推荐文章于 2023-12-25 15:55:33 发布

原创最新推荐文章于 2023-12-25 15:55:33 发布 · 2.4k 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍在VUE中如何通过动态切换路由来改变背景图片，包括在base组件中编写导航菜单，使用handleSelect(val,path)实现路由跳转，并在目标页面设置背景图片的css样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在VUE中通过默认会被渲染成一个标签，可以对a标签进行操作，但是这种如果如果要实现点击不同的导航菜单，base组件不改变的情况改变背景图片时，这种方法并不适合。

我们可以在base组件中编写导航菜单，通过handleSelect(val,path)实现动态的切换路由， 通过
this.$router.push添加跳转路由，我们可以在指定跳转路由前面进行获取需要改变的背景图片，然后传递给其他组件

在这里插入图片描述
传递参数后，需要在目标页面中进行接收并设置背景图片的css样式，这里需要注意的是，在设置之前要检查base组件中图片是否通过require导入，如果没有导入会出现背景图片设置失败问题

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小杨&

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Vue Router 实现路由切换时的页面预取数据

小白菜的博客

06-18

308

在现代单页应用(SPA)开发中，页面切换时的数据加载体验直接影响用户感知。本文旨在详细介绍 Vue Router 中实现路由切换时预取数据的各种方法和技术，帮助开发者优化应用性能。核心概念与联系：解释路由预取的基本原理实现方案：多种预取数据的技术方案实战案例：完整的代码实现和解释应用场景与优化建议路由预取：在用户实际导航到目标路由前，预先加载所需数据导航守卫：Vue Router 提供的路由导航生命周期钩子懒加载：按需加载路由组件或资源的技术// 静态预取数据方法},

Vue如何定义router-link的颜色样式

weixin_54048131的博客

08-05

2036

里面xxx的内容颜色都固定了，style样式改成：样式改不了。这样就可以修改样式了。

参与评论您还未登录，请先登录后发表或查看评论

VUE—底部导航路由切换时更换图片（图文）

Poppy_LYT的博客

08-13

2871

VUE—底部导航路由切换时更换图片第一步：布局给每个底部导航路由都绑定一个点击事件，不要绑定在router-link上，那样会不生效，并且动态的添加图片路径 v-for也行，那样需要动态的绑定方法，可参考 v-for时动态绑定函数 <mt-tab-item> <router-link to="/Home"> <div ...

vue切换路由也切换背景颜色

qq_49278026的博客

05-02

1318

vue 路由切换并修改背景图片

vue路由（router)实现导航栏图片的切换

zhang19903848257的博客

02-04

3158

导航栏实现图片切换，即点击时改变图片的路径，如果用一般的思路，即每次点击，调用方法，让其他的导航的图片发生改变，太过麻烦。一两个导航还好，假如多个导航则写出的代码过于繁杂。优化思路： 1、写一个容器，将每个导航选项的内容作为对象储存内容包括：切换前后的图片因为导航的切换使用路由实现的，所以要为对象的每一个属性添加一个path。用来实现v-for遍历时，为每一个 < router-l...

Vue路由this.route.push跳转页面不刷新

热门推荐

CoderYin的博客

04-29

2万+

Vue路由this.route.push跳转页面不刷新一、背景介绍：在vue项目开发中，使用路由进行页面跳转时，路由所跳转的页面不进行刷新。也就是vue生命周期函数没有执行(created、mounted钩子函数)。案例： A页面： B页面：问题：当在A页面第一点击按钮到B页面时，一切正常，当返回到A页面再次点击按钮时，B页...

Vue实现独立修改单个页面的背景色，进入不同的页面设置不同的背景颜色【两种方式】

在写作的路上持续输出。

11-18

2906

Vue实现独立修改单个页面的背景色，进入不同的页面设置不同的背景颜色【两种方式】

Vue 菜单栏点击切换单个class(高亮)的方法

10-18

在Vue.js中，实现菜单栏点击切换单个class（高亮）的功能是常见的需求，尤其是在构建具有导航功能的Web应用时。以下是一种简单而有效的方法：首先，我们需要在Vue实例的数据属性中定义一个变量，用于存储当前选中...

vue导航点击切换图片

boy火巨的博客

03-04

7521

导航切换后对应的彩色图片换成白色的图片；之前发过一篇用for循环出来三个按钮的切换图片的方法。有兴趣的可以看下https://blog.youkuaiyun.com/qq_42221334/article/details/81630634，现在介绍的是未用for循环的方法，因之前别人写好的代码，功能没做出来我这里给修改下把功能实现了！ html <template> <d...

使用vue-router切换页面时实现设置过渡动画

12-13

今天在编写页面时,看到页面没有任何效果就只是直入直出,完全没有一点逼格,所以想要实现类似于原生app的那种切换页面时的特效,遂开始google,发现网上各种方案都是各有优缺点,于是整理了自认为优雅的方案并记录下来. ...

Vue-Router实现页面正在加载特效方法示例

12-09

在构建单页面应用时，Vue-Router 负责定义路由规则，通过路径与 Vue 组件进行绑定，实现页面间的无刷新切换。这与传统页面应用中的超链接跳转方式有所不同，Vue-Router 实现的是组件的动态替换，而不是整个页面的...

router-link选中状态改变颜色

2301_76522234的博客

11-21

653

vue界面：style样式:

Vue系列：为不同页面设置body背景颜色

MUYI1111的博客

12-07

1530

由于SPA页面的特性，传统的设置 body 背景色的方法并不通用。解决方案：利用组件内的路由实现代码参考如下转载于:https://www.cnblogs.com/One-sprite/p/10083629.html...

Vue路由底部导航图片点击切换（绝对经典）

weixin_43540973的博客

08-17

2471

Vue路由底部导航图片点击切换（绝对经典）需求：实现图标点击进行切换，（使用场景：京东图标底部导航的切换显示）我这边为大家写出了两种方法： 1、为图片添加点击事件，在点击事件中改变图片地址 1.1、在app组件中添加显示图片代码 <router-link to='/fruits'> <img :src="fruitsimg" @click="fruitsclick" width="50px height: 50px;">水果</router-link>

监听路由变化，来改变导航栏背景色的改变

小雨

06-18

1151

vue中监听路由来改变点击之后导航栏的背景颜色变化 watch: { $route(to, from){ } } // 给router-link添加背景颜色 .router-link-active { background: #ffffff; } 因为进入网站默认的是首页导航，所以给首页导航的router-link里面加上 “exact” 属性把第一个导航截取出来 <router-link to="/" class="nav" tag

vue项目动态引用背景图片