使用vue实现导航栏切换效果

  • 发表时间: 2019-07-23
  • 分类: vue
  • 阅读量: 213
  • 作者: 七七

1.在app.vue文件中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
    <nav class="mui-bar mui-bar-tab">
        <router-link class="mui-tab-item" to="/home">
            <span class="mui-icon mui-icon-home"></span>
            <span class="mui-tab-label">首页</span>
        </router-link>
        <router-link class="mui-tab-item" to="/member">
            <span class="mui-icon mui-icon-email"></span>
            <span class="mui-tab-label">会员</span>
        </router-link>
        <router-link class="mui-tab-item" to="/shopcar">
            <span class="mui-icon mui-icon-extra mui-icon-extra-cart"><span class="mui-badge">0</span></span>
            <span class="mui-tab-label">购物车</span>
        </router-link>
        <router-link class="mui-tab-item" to="/search">
            <span class="mui-icon mui-icon-search"></span>
            <span class="mui-tab-label">搜索</span>
        </router-link>
    </nav>

2.在router.js配置路由

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import VueRouter from 'vue-router'
 
// 导入对应的路由组件
import HomeContainer from './components/tabbar/HomeContainer.vue'
import MemberContainer from './components/tabbar/MemberContainer.vue'
import ShopcarContainer from './components/tabbar/ShopcarContainer.vue'
import SearchContainer from './components/tabbar/SearchContainer.vue'
 
// 创建路由对象
var router = new VueRouter({
  routes: [//配置路由规则
    {path: '/home',component:HomeContainer},
    {path: '/member',component:MemberContainer},
    {path: '/search',component:SearchContainer},
    {path: '/shopcar',component:ShopcarContainer},
  ],
  linkActiveClass:'mui-active' //覆盖默认的路由高亮的类
})
 
// 把路由对象暴露出去
export default router


3.在对应的模板vue文件中写代码

1
2
3
4
5
6
7
8
9
10
11
12
<template>
    <div>
        <h3>ShopcarContainer</h3>
    </div>
</template>
 
<script>
</script>
 
<style lang="scss" scoped>
 
</style>



效果图如下:

20190723130059281.png

码云源码地址:https://gitee.com/imzqq/Vue-MintUI.git

文章评论

张琪琪

web前端开发

一个95后程序猿!记录平时遇到的技术问题和学习到的新知识,分享自己的一些生活、感悟。网站内容不定期更新,欢迎大家关注,共同交流进步。

点击排行

注册会员

用户名:

密码:

邮箱:

已有账号?登录

会员登录

用户名:

密码:

邮箱:

没有账号?注册