vue中的路由及自定义图标

效果如图所示:这里写图片描述

安装vue-router:
npm install vue-router --save
底部选项卡:
使用的是:MUI中的 tab bar(选项卡)
下载mui:[mui](https://github.com/dcloudio/mui),将其中的dist文件夹放到项目中的static文件夹下
核心文件引入:
在main.js文件中引入:
// 引入路由
import VueRouter from 'vue-router';
Vue.use(VueRouter);
// 引入MUI样式
import './static/vendor/mui/dist/css/mui.css'
里面的知识点:
1、自定义底部按钮图标
2、选项卡切换时选中样式绑定
技术实现:
1、自定义图标:
   阿里巴巴矢量图:http://iconfont.cn
   选好合适的图标,添加入库,选择添加至项目(需要登陆),不要
   选择下载素材。选择Font class ,下载至本地。
   把文件夹中的iconfont.ttf文件拷贝到项目中的mui-dist-
   fonts文件夹下
   把iconfont.css中的
   /*自定义图标*/
    .icon-huiyuan:before { content: "\e715"; }
    .icon-gouwuche:before { content: "\e600"; }
    拷贝到项目中的mui-dist-css中的mui.css里
   使用的时候直接添加对应类名即可,例如:
//路由,:to表示去往哪个页面
<router-link class="mui-tab-item" :to="{name:'vip'}">
    <span class="mui-icon icon-huiyuan"></span>
    <span class="mui-tab-label">会员</span>
</router-link>
2、菜单切换样式绑定
// 创建对象并配置路由规则
let router = new VueRouter({
    //选中时通过添加类名添加样式
    linkActiveClass:'mui-active',
    routes:[
        {path:'/',redirect:{name:'home'}},
        {name:'home',path:'/home',component:Home},
        {name:'vip',path:'/vip',component:Vip}  
    ]
})
  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值