vue底部跳转_Vue中底部tabBar切换及跳转

tabBar.vue文件，写法如下：

tabBar.vue 中 js

export default {

name: "Tabbar",

data(){

return{

tabBarImg:[

{

path:'/home',

normal:require('./../assets/img/tab_guamai_nor_icon-xhdpi.png'),

icon:require('./../assets/img/tab_guamai_sel_icon-xhdpi.png'),

title:'娱乐咨询'

{

path:'/chat',

normal:require('./../assets/img/tab_hangqing_nor_icon-xhdpi.png'),

icon:require('./../assets/img/tab_hangqing_sel-xhdpi.png'),

title:'聊天'

{

path:'/me',

normal:require('./../assets/img/tab_wode_nor_icon-xhdpi.png'),

icon:require('./../assets/img/tab_wode_sel_icon-xhdpi.png'),

title:'我的'

]

}

methods:{

switchToTab(path){

console.log(path);

this.$router.replace(path);

}

路由代码如下：

meta：用来判断底部tabbar组件是否显示

import Vue from 'vue'

import VRouter from 'vue-router'

import Home from './../components/Home.vue';

import Chat from './../components/Chat.vue';

import Me from './../components/Me.vue';

import Login from './../components/Login.vue';

Vue.use(VRouter);

export default new VRouter({

mode:'history',

routes:[

{

path:'/home',

component:Home,

meta:{

showTab:true

}

{

path:'/chat',

component:Chat,

meta:{

showTab:true

}

{

path:'/me',

component:Me,

meta:{

showTab:true

}

{

path:'/login',

component:Login

{

path:'/',

redirect:'/home'

}

]

})

App.vue中，判断底部导航栏是否显示

vue底部跳转_Vue中底部tabBar切换及跳转相关推荐

vue 用户名重复验证_Vue中的验证登录状态
Vue项目中实现用户登录及token验证先说一下我的实现步骤: 使用easy-mock新建登录接口,模拟用户数据使用axios请求登录接口,匹配账号和密码账号密码验证后, 拿到token,将to ...
vue试按钮失去焦点_Vue中实现回车键切换焦点的方法
几乎在所有浏览器中,都具有 Tab 键切换焦点的功能. 但是任性的用户强烈要求一定要有 Enter 键切换焦点的功能. 为了交付上线拿到钱,我们只好再一次毫无原则性的接受了客户的需求. 在上一代人中, ...
vue 数组对象提取_vue中使用对象数组的最佳实践
前言: 在平常的开发中,经常会在vue中用到对象数组,如渲染一个小区的列表,数据结构可能如下所示: CommunityList: [ { _id: '', community_code: '', co ...
vue 函数路由跳转_vue路由的钩子函数和跳转
首页可以控制导航跳转,beforeEach,afterEach等,一般用于页面title的修改.一些需要登录才能调整页面的重定向功能. beforeEach主要有3个参数to,from,next. t ...
php中怎样阻止网页进行跳转,php中如何阻止网页进行跳转？
php中如何阻止网页进行跳转?下面本篇文章给大家介绍一些PHP中阻止网页进行跳转的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. PHP中阻止网页进行跳转的方法 1.通过hea ...
android home跳转,Android 中按home键和跳转到主界面的实例代码
Android 中按home键和跳转到主界面的实例代码 //home Intent intent= new Intent(Intent.ACTION_MAIN); intent.setFlags(In ...
vue watch 修改滚动条_vue 中滚动条始终定位在底部的方法
滚动条定位在底部,首先想到的是,动态修改滚动条到顶部的距离等于div的高度, 代码实现: var div = document.getElementById('data-list-content') ...
vue 函数路由跳转_vue中通过路由跳转的三种方式
router-view 实现路由内容的地方,引入组件时写到需要引入的地方需要注意的是,使用vue-router控制路由则必须router-view作为容器. 通过路由跳转的三种方式 1.router ...
vue 传递对象路由_vue中路由参数传递可能会遇到的坑
前言 vue中路由跳转传参数有多种,自己常用的是下面的几种通过router-link进行跳转通过编程导航进行路由跳转本文主要给大家介绍了关于vue路由参数传递遇到的一些坑,分享出来供大家参考学习 ...

vue底部跳转_Vue中底部tabBar切换及跳转

vue底部跳转_Vue中底部tabBar切换及跳转相关推荐

最新文章

热门文章