vue移动端页面底部导航路由注册+底部跳转+固定头部和底部

最新推荐文章于 2023-11-14 15:32:49 发布
VIP文章 最新推荐文章于 2023-11-14 15:32:49 发布
阅读量1.6k 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38412122/article/details/109273509
版权

1.注册路由

在router文件夹注册路由，注册路由方式有两种，
一种是使用import引入路由，引入之后，再进行基础注册，如下图所示
引入路由
普通注册
第二种是懒加载方式去注册路由
懒加载注册方式
两者的区别在于component后面接收的类型不一样

2.路由跳转

默认生成的是一个a标签，他身上还有一个属性叫tag，表示生成什么样的标签，保证原有样式
路由跳转

3.底部设置默认样式

当点击当前项，会发现，vue自带一个class属性值，我们可以选取其中一个作为当前项，进而设置样式，打开控制台点击底部观察即可发现。

4.出现滚动条时，实现头部和底部固定

底部实现固定的方式：将盒子先分为底部footer和底部以上的box，将整个盒子设置为display:flex弹性盒，给footer设置固定的高度，同时给上边的box设置overflow:a

最低0.47元/天 解锁文章
努力向上长的小小草啊
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
移动端底部导航固定配合vue-router实现组件切换功能
10-16
经常遇到这样的需求，移动端中的导航并不是在顶部也不是在底部，而是在最底部且是固定的，当我们点击该导航项时会切换到对应的组件。这篇文章主要介绍了移动端底部导航固定配合vue-router实现组件切换功能,需要的朋友可以参考下
Vue 菜单路由（router）只替换对应主页面中内容，而不是整个home页面的router index.js的两种设置方法
Zoroastriani13的博客
04-21 5078
在系统登录到系统主页面之后，通过点击不同的菜单动态在主页面内替换相应的内容，而保持菜单栏和标题栏内容不变，可以通过以下两种方式实现，两种方式的原理都是相同的， 方式一：在路由设置时，设置一个home路由，其compone对应的就是home组件，然后一级菜单对应的路由都作为其children[ ]进行设置，在home页面的 主界面（main）添加<router-view>,则在点击主界面的菜单栏跳转指定的router时，就会只替换home中添加<router-view>的位置，此
3分钟学会搭建动态侧边栏导航：Vue + Element-UI
weixin_52268321的博客
02-26 1万+
3分钟学会搭建动态侧边栏导航：Vue + Element-UI
VUE 点击导航跳转后固定在页面头部
ikEason_的博客
09-23 764
VUE 点击导航跳转后固定在页面头部
Vue之简单导航栏
热门推荐
程序小白要变黑
07-21 2万+
使用vue-router实现简单的导航栏功能。
VUE写一个顶部导航栏
altersueyunsheng的博客
06-03 1万+
最近一个实验要做一个中超足球联赛的数据库设计，我打算采用springboot+vue来完成，现在是从零开始学习vue的过程，先试着写一个顶部导航栏。效果如下： 新建一个navbar的组件 首先在APP.VUE中写好header的样式 <template> <div id="app"> <header> <Navbar /> </header> </div> </template> <sc
vue开发移动端底部导航条功能
10-15
主要介绍了vue开发移动端底部导航条功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
vue+element导航+标签导航+路由跳转+路由转换.zip
05-21
vue+element导航+标签导航+路由跳转+路由转换，有需要可以取，博客有详尽说明，https://blog.csdn.net/Hei_lovely_cat/article/details/104692047
vue移动端项目底部导航，刷新页面保持原来的导航不变
01-20
都知道 移动端项目往往底部会有一个导航 ，但我们在vue每次初始化的时候 底部导航会重新回到首页，或者是用户直接登录购物车的时候,提示用户登录要跳转到 登录界面，这个时候底部导航应该是跟着跳转的，而不应该...
Vue+路由+导航和传参+示例
最新发布
02-26
Vue+路由+导航和传参+示例 - 本资源是一个Vue的示例，展示了如何用Vue的路由技术实现网页的导航和传参，包括使用动态路由，嵌套路由，导航守卫，元信息等。
2021-11-06 学习记录--Vue-实现页面之间切换后，不会改变原来的浏览位置，不会跳回到页面最顶部
weixin_48850734的博客
11-06 906
实现从A页面切换到B页面，再次切换到A页面时，不会自动跳转到A页面的最顶部，而是停留在A页面原来的浏览位置 造成原因：Vue自带一个属性：destroyed（销毁） 解决方法：用<keep-alive></keep-alive>进行包裹 如下图中最下面所示：有四个可切换的页面：首页（Home.vue）、分类（Category.vue）、购物车（ShopCart.vue）、我的（Profile.vue） 第一步、分析造成原因 假如在首页（Home.vue）页面里写入代码： // 销
vue3配置导航栏和页脚（附代码）
如果相遇，那么你好哦~
11-14 1640
本文主要是针对刚上手 Vue3 的初学者所写。涉及内容比较简单，没有太过于复杂的逻辑。因此有想学神入知识的可以看一下别的文章。 本次实验的技术是 Vue3 + TypeScript + Element Plus 。因为这三个是在 Vue 开发中经常一起出现的。如果没有学过的话也不要紧，逻辑大体是一样的，不妨碍阅读。 这里附上 Gitee 开源地址，有想要实践一下又懒得写代码的小伙伴可以直接下载运行。同时在本系列 Vue3 学习中，后续代码也都会更新在这个
vue--实现移动端导航栏效果
小白小白从不日别的博客
12-08 3699
基本步骤： 1.搭建页面的基本结构和利用 v-for 渲染对应的数据 <template> <div class="wrap"> <div class="nav_left" id="navLeft"> <div class="nav_content"> <span v-for="(obj, index) in arr" :key="obj.first_id" @click="changeTab(ind...
导航菜单
qq_39368007的博客
04-17 1567
相关样式 方向：水平 默认的 垂直 layui-nav-tree <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitio...
vue移动端头部和底部不动，中间自由滑动的设置
improvement
06-06 4904
vue移动端头部header和底部footer不动，中间main自由滑动的设置 <template> <div id="app"> <div class="header"></div> <div class="main"></div> <div class="footer"></div> </div> </template> ​ style中
前端 vue 自定义导航栏组件高度及返回箭头 自定义 tabbar 图标
chenchuang0128的博客
06-11 1203
前端vue自定义导航栏组件高度及返回箭头 自定义tabbar图标, 下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?" @click="goBackIndex">返回index页面"fontSrc": "/static/iconfont.ttf", // 字体文件。"text": "" // 字体图标\u 开头，加上字体图标unicode后面四位。"navigationBarTitleText": "首页",
Vue自定义网页顶部导航栏
京茶吉鹿的博客
04-12 1万+
veu实现网页顶部导航栏，vue-router，VueRouter
vue实现一个简单导航栏
[email protected]
10-10 569
至此，我们的简易导航栏就基本完成！
vue的手机端框架mint-ui头部header组件实现返回到上一个浏览页面
weixin_33936401的博客
06-25 964
<mt-header title="中文号主页" fixed> <router-link to="" slot="left"> <mt-button icon="back" @click="$router.back(-1)"></mt-button> </router-link> &lt...
[Vue+Vant] 多页面共用底部导航栏 Tabbar
05-30
基于以上需求，我们可以考虑使用 Vue.js 和 Vant UI 组件库来实现多页面共用底部导航栏。具体实现步骤如下： 1. 创建多个页面：在项目中创建多个页面，每个页面对应一个路由。这些页面可以是纯 HTML 页面，也可以是...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值