Skip to content
Toggle navigation
Toggle navigation
This project
Loading...
Sign in
xqz
/
dianDemo
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
0
Merge Requests
0
Wiki
Network
Create a new issue
Builds
Commits
Issue Boards
Files
Commits
Network
Compare
Branches
Tags
8d89e205
authored
2020-05-31 22:17:06 +0800
by
xiaodi
Browse Files
Options
Browse Files
Tag
Download
Email Patches
Plain Diff
优化
1 parent
a38a270f
Hide whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
92 additions
and
36 deletions
src/App.vue
src/components/TabBar.vue
src/config/router.config.js
src/layouts/TabBarLayout.vue
src/App.vue
View file @
8d89e20
<
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
>
...
...
src/components/TabBar.vue
View file @
8d89e20
<
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
>
...
...
src/config/router.config.js
View file @
8d89e20
...
...
@@ -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 标识
}
},
{
path
:
'/about'
,
name
:
'about'
,
component
:
()
=>
import
(
'@/views/home/about'
),
meta
:
{
title
:
'关于我'
,
keepAlive
:
false
}
},
children
:
[
{
path
:
'/home'
,
name
:
'Home'
,
component
:
()
=>
import
(
'@/views/home/index'
),
meta
:
{
title
:
'首页'
,
keepAlive
:
false
}
},
{
path
:
'/about'
,
name
:
'About'
,
component
:
()
=>
import
(
'@/views/home/about'
),
meta
:
{
title
:
'关于我'
,
keepAlive
:
false
}
}
]
}
]
...
...
src/layouts/TabBarLayout.vue
0 → 100644
View file @
8d89e20
<
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
>
Write
Preview
Styling with
Markdown
is supported
Attach a file
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to post a comment