vue2.x 路由TabBar练习

最新推荐文章于 2023-09-22 10:57:55 发布

notChange

最新推荐文章于 2023-09-22 10:57:55 发布

阅读量489

点赞数

分类专栏： vue 文章标签： javascript vue.js 开发语言

本文链接：https://blog.csdn.net/notChange/article/details/123250086

版权

实现效果如图，点击按钮显示页面，活动界面按钮高亮

实现思路

创建项目(使用vue-cli2方式)

删除无用文件

创建base.css，设置基本样式

修改App.vue内容，初步实现样式

<template>
  <div id="app">
    <div id="tab-bar">
      <div class="tab-bar-item">首页</div>
      <div class="tab-bar-item">分类</div>
      <div class="tab-bar-item">购物车

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

notChange

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue2.x 路由TabBar练习

结合路由实现TabBar组件的封装
复制链接

扫一扫

专栏目录

vue2.0小案例——实现移动端tabbar布局

qq_56607109的博客

09-01

524

【代码】vue2.0小案例——实现移动端tabbar布局。

使用Vue-Router 2实现路由功能实例详解

08-28

vue-router 2只适用于Vue2.x版本，下面我们是基于vue2.0讲的如何使用vue-router 2实现路由功能,需要的朋友可以参考下

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

vue2封装tabbar组件

weixin_57399180的博客

06-01

439

使用vue2封装一个tabbar组件：目录结构：

vue2简易路由复习

weixin_41993525的博客

04-12

229

（官方语言：）所以呢，我们要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你app依赖的页面。因为这种模式不好区分一个路由是前端路由还是后端路由，而浏览器默认认为是后端的，所以向后端的这个接口发请求，如果后台没有正确的配置，当用户在浏览器直接访问这个网址就会返回404。这种模式可以避免服务器配置的问题，而且支持所有浏览器，由于 URL 中添加了 hash，因此在搜索引擎的 SEO 优化中存在一些问题。

vue2.0 之 douban （二）创建自定义组件tabbar

weixin_34261739的博客

09-10

1.大体布局这个组件分为两部分：第一个是组件的外层容器，第二个是组件的子容器item，子组件里面又分为图片和文字组合。子组件有2个状态，一个默认灰色的状态，一个选中状态，我们来实现一下这个组件的布局 Index.vue <template> <div class="m-tabbar"> <a class="m-tabbar-item is-active...

基于Vue2.X的路由和钩子函数详解

08-28

Vue2.X的路由和钩子函数是Vue.js框架中两个关键组件，用于管理应用程序中的导航和路由跳转。本文将深入探讨Vue2.X中的路由和钩子函数，了解它们的作用、用法和实现原理。一、导航和钩子函数在Vue2.X中，导航和...

Vue-Router2.X多种路由实现方式总结

08-28

Vue-Router2.X是Vue2.x生态中的官方路由管理库，它使得在单页应用(SPA)中管理页面导航和组件加载变得简单。本文将详细总结Vue-Router2.X的几种主要路由实现方式。首先，要使用Vue-Router，你需要在`main.js`文件中...

vue3.x+vite+ts+vue-router@4.x 路由使用demo

07-24

Vue Router 是 Vue.js 官方的路由管理器，版本4.x 对应的是与 Vue3.x 兼容的新版。它负责处理应用的导航和页面间的通信，使得单页应用（SPA）能够根据 URL 进行状态管理和页面切换。在这个"vue3.x+vite+ts+vue-...

vue2.0实现一个直角梯形的tabbar组件

最新发布

qq_43610311的博客

09-22

306

使用vue自定义一个直角梯形的tabbar

vue路由跳转tabBar图片和文字的高亮效果

The_more_more的博客

05-16

963

vue路由跳转tabBar图片和文字的高亮效果前言在pc端和移动端的项目里面会遇见导航栏或者tabBar的点击跳转，图片和文字的高亮效果，对于小程序来说可以直接创建和修改图片和文字的高亮效果，也可以使用相应的组件库去自定义一些效果，而在pc端和移动端的来说需要对导航栏或者tabBar进行一定的封装，使其成为全局组件的使用，结合组件间的数据传递可以实现不同页面的不同信息的展示，本篇文章介绍路由跳转的时候，使图片和文字的高亮效果的方法定义基本的组件在demo的初期，我们需要在项目的components文

180-Vue路由实例——tabbar路由跳转——路由嵌套

jolinoy的博客

08-16

1189

其它的四个组件，类同，只不过是，把template标签里面的文字，分别写为：分类，购物车，我的页面，404。router/index.js代码：这里设置路由跳转路径。此处设置的有嵌套路由。180-Vue路由实例——tabbar路由跳转——路由嵌套。最终的效果在最上面。...

Vue2项目练习｜后台管理问题总结

Nothingnessdosink的博客

12-10

423

后台管系统项目练习相关问题

VUE路由案例（商品列表）---vue练习必选项目(附原码)

idiot_MAN的博客

09-28

1068

练习VUE基础知识点，练习了组件封装，父子组件之间得通信，组件插槽和组件路由，是一个很不错得练习项目。

React——Ant Design Mobile的TabBar标签栏的简单使用（配合路由）

朝朝忆萍的博客

02-17

1858

官网上使用太繁琐，记录第一次使用时的代码，最简单的使用

vue2项目之transition标签搭配动画

m0_63907100的博客

03-08

202

transition标签搭配动画

基于vue带动画效果tab切换组件封装

qiancheng2019的博客

12-21

640

基于vue的tab栏切换组件子组件 <template> <div class="tabBarP"> <ul> <li v-for="(item,index) in tabDatas.list" :key="item.id" ref="el" :class="{'active':item.isActive}" @click="swapStatus(item,index)"> {{ item.name }}

Tabbar标签绑定路由时的问题

weixin_44576277的博客

12-17

355

[Vue warn]: Computed property "active" was assigned to but it has no setter. found in ---> <MyTabbar> at src/components/MyTabbar.vue <App> at src/App.vue <Root>

Vue - tabbar和路由结合效果

qq_33962481的博客

08-21

446

文章目录一、修改底部样式一、修改底部样式 TabBarItem.vue <template> <div class="tab-bar-item">   <slot v-if="isActive" name="item-icon"></slot>

Vue学习第27天——路由vue-router的详解及案例练习

背心的博客

09-21

2437

路由vue-router的详解及案例练习

vue2.x路由导航守卫案例

07-17

下面是一个Vue.js 2.x中使用路由导航守卫的案例： ```javascript // main.js import Vue from 'vue' import VueRouter from 'vue-router' import App from './App.vue' Vue.use(VueRouter) const router = new ...