优化
Showing
4 changed files
with
92 additions
and
36 deletions
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 | ] | ... | ... |
src/layouts/TabBarLayout.vue
0 → 100644
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> |
-
Please register or sign in to post a comment