8d89e205 by xiaodi

优化

1 parent a38a270f
<template>
<div class="app" id="app">
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
<!-- tabbar -->
<TabBar></TabBar>
<div id="app">
<router-view />
</div>
</template>
<script>
import TabBar from '@/components/TabBar'
export default {
name: 'App',
components: {
TabBar
}
name: 'App'
}
</script>
<style lang="scss"></style>
......
<template>
<div>
<van-tabbar fixed route>
<van-tabbar-item to="/" icon="home-o">
首页
</van-tabbar-item>
<van-tabbar-item to="/about" icon="user-o">
关于我
<van-tabbar fixed route v-model="active" @change="handleChange">
<van-tabbar-item v-for="(item, index) in data" :to="item.to" :icon="item.icon" :key="index">
{{ item.title }}
</van-tabbar-item>
</van-tabbar>
<!-- <van-tabbar fixed v-model="active" @change="onChange">
<van-tabbar-item to="/home" icon="home-o">首页</van-tabbar-item>
<van-tabbar-item to="/about" icon="user-o">关于我</van-tabbar-item>
</van-tabbar> -->
</div>
</template>
<script>
export default {
name: 'TabBar',
props: {
defaultActive: {
type: Number,
default: 0
},
data: {
type: Array,
default: () => {
return []
}
}
},
data() {
return {
active: 0
active: this.defaultActive
}
},
methods: {}
methods: {
handleChange(value) {
this.$emit('change', value)
}
}
}
</script>
......
......@@ -6,19 +6,28 @@ export const constantRouterMap = [
{
path: '/',
name: 'index',
component: () => import('@/views/home/index'), // 路由懒加载
component: () => import('@/layouts/TabBarLayout'), // 路由懒加载
redirect: '/home',
meta: {
title: '首页', // 页面标题
keepAlive: false // keep-alive 标识
}
},
children: [
{
path: '/home',
name: 'Home',
component: () => import('@/views/home/index'),
meta: { title: '首页', keepAlive: false }
},
{
path: '/about',
name: 'about',
name: 'About',
component: () => import('@/views/home/about'),
meta: {
title: '关于我',
keepAlive: false
}
}
]
}
]
......
<template>
<div class="tabbar-layout-containter">
<div class="tabbar-layout-content">
<keep-alive v-if="$route.meta.keepAlive">
<router-view></router-view>
</keep-alive>
<router-view v-else></router-view>
</div>
<div class="tabbar-layout-footer">
<TabBar :data="tabbars" @change="handleChange" />
</div>
</div>
</template>
<script>
import TabBar from '@/components/TabBar'
export default {
name: 'TabBarLayout',
data() {
return {
tabbars: [
{
title: '首页',
to: {
name: 'Home'
},
icon: 'home-o'
},
{
title: '关于我',
to: {
name: 'About'
},
icon: 'user-o'
}
]
}
},
components: {
TabBar
},
methods: {
handleChange(v) {
console.log('tab value:', v)
}
}
}
</script>
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!