返回顶部
首页 > 资讯 > 前端开发 > JavaScript >利用vant如何给tabbar配置路由
  • 229
分享到

利用vant如何给tabbar配置路由

2024-04-02 19:04:59 229人浏览 薄情痞子
摘要

目录给tabbar配置路由在父级路由写tabbar标签在路由配置的javascript文件中vant踩坑记录tabbbar路由模式这里使用路由传参给tabbar配置路由 在父级路由写

给tabbar配置路由

在父级路由写tabbar标签

<template>
<div class="layoutContainer">
    <!-- 子路由出口 -->
    <router-view></router-view>
    <!-- 底部导航栏 -->
    <!-- 给tabbar--route属性  然后给每一项to属性就可以路由跳转了 -->
    <van-tabbar v-model="active" route>
        <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
        <van-tabbar-item icon="search" to="/question">问答</van-tabbar-item>
        <van-tabbar-item icon="friends-o" to="/video">视频</van-tabbar-item>
        <van-tabbar-item icon="setting-o" to="/my">我的</van-tabbar-item>
    </van-tabbar>
</div>
</template>
<script>
export default {
    name: 'layoutIndex',
    data() {
        return {
            active: 0
        }
    }
}
</script>
<style>
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -WEBkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
}
</style>

在路由配置的JavaScript文件中

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
//路由表
const routes = [
  {
    path:'/login',
    name:'login',
    component:()=>import('@/views/login/')
  },
  {
    path:'/',
    component:()=>import('@/views/layout/'),
    children:[
      {
        path:'',//首页是默认子路由,所谓为空
        name:'home',
        component:()=>import('@/views/home/')
      },
      {
        path:'/question',
        name:'question',
        component:()=>import('@/views/question/')
      },
      {
        path:'/video',
        name:'video',
        component:()=>import('@/views/video/')
      },
      {
        path:'/my',
        name:'my',
        component:()=>import('@/views/my/')
      }
    ]
  }
]
const router = new VueRouter({
  routes
})
export default router

vant踩坑记录

tabbbar路由模式

<router-view />
<van-tabbar route>
  <van-tabbar-item replace to="/home/menu/资源" icon="home-o">标签</van-tabbar-item>
    <van-tabbar-item replace to="/home/menu/信息" icon="home-o">标签</van-tabbar-item>
  <van-tabbar-item replace to="/search" icon="search">标签</van-tabbar-item>
</van-tabbar>

这里使用路由传参

二级路由跳转到子级页面,返回以后,tabbar按钮高亮消失,原因是传递的参数不能是汉字,改为英文就好了

<router-view />
<van-tabbar route>
  <van-tabbar-item replace to="/home/menu/resources" icon="home-o">标签</van-tabbar-item>
    <van-tabbar-item replace to="/home/menu/infORMation" icon="home-o">标签</van-tabbar-item>
  <van-tabbar-item replace to="/search" icon="search">标签</van-tabbar-item>
</van-tabbar>

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: 利用vant如何给tabbar配置路由

本文链接: https://lsjlt.com/news/147574.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 利用vant如何给tabbar配置路由
    目录给tabbar配置路由在父级路由写tabbar标签在路由配置的JavaScript文件中vant踩坑记录tabbbar路由模式这里使用路由传参给tabbar配置路由 在父级路由写...
    99+
    2024-04-02
  • vue如何配置路由
    在vue中配置路由的方法:1.新建项目,引入vue和vue-router;2.使用Vue.use方法注册路由;3.执行代码配置路由;具体步骤如下:首先,在新建一个html项目,并在项目中引入vue和vue-router;import Vue...
    99+
    2024-04-02
  • 如何配置OSPF动态路由
    小编给大家分享一下如何配置OSPF动态路由,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!OSPF开放式最短路径优先协议,是目前网络中应用最广泛的路由协议之一。属于...
    99+
    2023-06-27
  • AngularJS如何利用路由传值
    小编给大家分享一下AngularJS如何利用路由传值,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!具体内容如下 1.导包&nbs...
    99+
    2024-04-02
  • Linux下如何配置静态路由
    这篇文章主要为大家展示了“Linux下如何配置静态路由”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Linux下如何配置静态路由”这篇文章吧。静态路由是一种路由的方式,路由项由手动配置,而非动态...
    99+
    2023-06-28
  • 如何理解react路由Link配置
    如何理解react路由Link配置,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。1、Link的to属性(1)放置路由路径(2)放置对象,且为规定格式{pathn...
    99+
    2023-06-25
  • 云服务器如何配置路由
    云服务器可以配置路由来使客户端向云服务器发送请求时,路由到不同的节点,从而提高效率。以下是一些配置路由的方法: 确定网络拓扑结构:云服务器需要有一个网络拓扑结构,包括路由节点和其它节点。可以使用云服务器提供商提供的配置工具来配置路由,例...
    99+
    2023-10-26
    路由 服务器
  • Vue中的路由配置项meta如何使用
    这篇文章主要介绍了Vue中的路由配置项meta如何使用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Vue中的路由配置项meta如何使用文章都会有所收获,下面我们一起来看看吧。Vue路由配置项meta使用met...
    99+
    2023-07-04
  • kubernetes中Istio如何配置请求路由
    这篇文章主要为大家展示了“kubernetes中Istio如何配置请求路由”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“kubernetes中Istio如何配置请求路由”这篇文章吧。一:简介由于...
    99+
    2023-06-04
  • 云服务器如何配置路由器
    云服务器需要配置路由器才能让用户通过互联网访问其托管的数据。以下是一些基本的配置建议: 选择可靠的路由器和互联网访问设备:可以选择一些高质量的路由器和互联网访问设备。这些设备应该能够提供高速、可靠和安全的连接,同时提供足够的带宽和处理能...
    99+
    2023-10-26
    路由器 服务器
  • 如何配置云服务器路由器
    配置云服务器路由器时,应该遵循以下步骤: 确定您要使用的路由策略:您可以根据您的具体需求选择合适的路由策略,比如按照流量、数据包的类型、路由的路径等进行分配。您可以在配置文件中指定路由策略,并且可以选择自动或手动调整路由策略。在这里我将...
    99+
    2023-10-27
    路由器 服务器
  • 用GNS3 配置静态路由
    打开  GNS3打开GNS3后  新工程是本身就有的 可以直接关掉  点击  编辑  给GNS3 装上IOS镜像文件用刚装好的ISO镜像文件路由器拖出三个路由器和两个PC机  和给PC机装上虚拟网卡拖好 拓扑图查看  路由器的端口打开  S...
    99+
    2023-01-31
    路由 静态
  • 云服务器如何配置路由器设置
    云服务器需要配置路由器才能让用户通过其它云服务提供商访问。以下是一些简单的步骤,让您配置路由器并设置相关的路由设置。 确保您的服务器是私有云:在您创建私有云计算环境时,确保您选择了一个可以保护您的数据和安全的服务器。在您购买云服务器后,...
    99+
    2023-10-26
    路由器 服务器
  • 如何配置云服务器路由器设置
    首先,需要确定云服务器的网络拓扑结构。在实际的网络拓扑结构中,需要考虑以下几点: 服务器所在的位置和IP地址 服务提供商的地址和IP地址 用户的IP地址和端口号 用户需要访问的云服务器的地址 在选择网络拓扑结构后,接下来需要考虑路由器...
    99+
    2023-10-27
    路由器 服务器
  • react项目中如何使用插件配置路由
    本篇内容介绍了“react项目中如何使用插件配置路由”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!react路由中没有安全守卫推荐使用插件完...
    99+
    2023-07-05
  • 【学习整理】静态路由如何配置
    一 .  静态路由是什么? 静态路由是一种路由的方式,路由项由手动配置,而非动态决定。与动态路由不同,静态路由是固定的,不会改变,即使网络状况已经改变或是重新被组态。一般来说,静态路由是由我们网管逐项加入路由表。 介绍一下这个静态路由的语法...
    99+
    2023-09-12
    学习 服务器 运维
  • 云服务器如何配置路由模式
    云服务器的路由模式配置可以通过以下步骤完成: 登录云服务器,打开终端窗口。 输入命令“sudo su”并按下回车键,输入管理员密码以获取管理员权限。 输入命令“vi /etc/sysctl.conf”并按下回车键,打开系统配置文件。 在...
    99+
    2023-10-26
    路由 模式 服务器
  • 云服务器如何配置路由协议
    云服务器需要配置路由协议才能保证路由的安全性和可靠性。以下是一些常用的路由协议供您参考: RIP:RIP 协议是 IGRP 的前置协议,它是一种广泛用于 Ethernet 网络的路由协议。在 Ethernet 网络中,每个主机都有一个自...
    99+
    2023-10-26
    路由协议 服务器
  • 云服务器如何配置路由协议设置
    云服务器路由协议是云计算的重要组成部分,它是指在云服务器之间进行路由的协议。在使用云服务器时,需要使用路由协议来将数据路由到目标计算机上,以便进行数据交换。 以下是一个简单的设置路由协议的示例代码: 首先,要安装路由协议,可以使用以下命...
    99+
    2023-10-26
    路由协议 服务器
  • 云服务器如何配置路由器上网
    云服务器(Cloud Hosting Service,简称C2H)是一种虚拟私有云计算服务平台,可以将数据存储在远程服务器上,供客户随时访问或存储。以下是一个配置云服务器上网的简单步骤: 在虚拟私有云计算平台中安装IIS和ApacheW...
    99+
    2023-10-26
    路由器 服务器
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作