8d89e205 by xiaodi

优化

1 parent a38a270f
1 <template> 1 <template>
2 <div class="app" id="app"> 2 <div id="app">
3 <keep-alive> 3 <router-view />
4 <router-view v-if="$route.meta.keepAlive"></router-view>
5 </keep-alive>
6 <router-view v-if="!$route.meta.keepAlive"></router-view>
7 <!-- tabbar -->
8 <TabBar></TabBar>
9 </div> 4 </div>
10 </template> 5 </template>
11 <script> 6 <script>
12 import TabBar from '@/components/TabBar'
13
14 export default { 7 export default {
15 name: 'App', 8 name: 'App'
16 components: {
17 TabBar
18 }
19 } 9 }
20 </script> 10 </script>
21 <style lang="scss"></style> 11 <style lang="scss"></style>
......
1 <template> 1 <template>
2 <div> 2 <div>
3 <van-tabbar fixed route> 3 <van-tabbar fixed route v-model="active" @change="handleChange">
4 <van-tabbar-item to="/" icon="home-o"> 4 <van-tabbar-item v-for="(item, index) in data" :to="item.to" :icon="item.icon" :key="index">
5 首页 5 {{ item.title }}
6 </van-tabbar-item>
7 <van-tabbar-item to="/about" icon="user-o">
8 关于我
9 </van-tabbar-item> 6 </van-tabbar-item>
10 </van-tabbar> 7 </van-tabbar>
11 <!-- <van-tabbar fixed v-model="active" @change="onChange">
12 <van-tabbar-item to="/home" icon="home-o">首页</van-tabbar-item>
13 <van-tabbar-item to="/about" icon="user-o">关于我</van-tabbar-item>
14 </van-tabbar> -->
15 </div> 8 </div>
16 </template> 9 </template>
17 <script> 10 <script>
18 export default { 11 export default {
19 name: 'TabBar', 12 name: 'TabBar',
13 props: {
14 defaultActive: {
15 type: Number,
16 default: 0
17 },
18 data: {
19 type: Array,
20 default: () => {
21 return []
22 }
23 }
24 },
20 data() { 25 data() {
21 return { 26 return {
22 active: 0 27 active: this.defaultActive
23 } 28 }
24 }, 29 },
25 methods: {} 30 methods: {
31 handleChange(value) {
32 this.$emit('change', value)
33 }
34 }
26 } 35 }
27 </script> 36 </script>
28 37
......
...@@ -6,19 +6,28 @@ export const constantRouterMap = [ ...@@ -6,19 +6,28 @@ export const constantRouterMap = [
6 { 6 {
7 path: '/', 7 path: '/',
8 name: 'index', 8 name: 'index',
9 component: () => import('@/views/home/index'), // 路由懒加载 9 component: () => import('@/layouts/TabBarLayout'), // 路由懒加载
10 redirect: '/home',
10 meta: { 11 meta: {
11 title: '首页', // 页面标题 12 title: '首页', // 页面标题
12 keepAlive: false // keep-alive 标识 13 keepAlive: false // keep-alive 标识
13 } 14 },
14 }, 15 children: [
15 { 16 {
16 path: '/about', 17 path: '/home',
17 name: 'about', 18 name: 'Home',
18 component: () => import('@/views/home/about'), 19 component: () => import('@/views/home/index'),
19 meta: { 20 meta: { title: '首页', keepAlive: false }
20 title: '关于我', 21 },
21 keepAlive: false 22 {
22 } 23 path: '/about',
24 name: 'About',
25 component: () => import('@/views/home/about'),
26 meta: {
27 title: '关于我',
28 keepAlive: false
29 }
30 }
31 ]
23 } 32 }
24 ] 33 ]
......
1 <template>
2 <div class="tabbar-layout-containter">
3 <div class="tabbar-layout-content">
4 <keep-alive v-if="$route.meta.keepAlive">
5 <router-view></router-view>
6 </keep-alive>
7 <router-view v-else></router-view>
8 </div>
9 <div class="tabbar-layout-footer">
10 <TabBar :data="tabbars" @change="handleChange" />
11 </div>
12 </div>
13 </template>
14
15 <script>
16 import TabBar from '@/components/TabBar'
17 export default {
18 name: 'TabBarLayout',
19 data() {
20 return {
21 tabbars: [
22 {
23 title: '首页',
24 to: {
25 name: 'Home'
26 },
27 icon: 'home-o'
28 },
29 {
30 title: '关于我',
31 to: {
32 name: 'About'
33 },
34 icon: 'user-o'
35 }
36 ]
37 }
38 },
39 components: {
40 TabBar
41 },
42 methods: {
43 handleChange(v) {
44 console.log('tab value:', v)
45 }
46 }
47 }
48 </script>
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!