vue中的路由及自定义图标
效果如图所示:安装vue-router:npm install vue-router --save底部选项卡:使用的是:MUI中的 tab bar(选项卡)下载mui:[mui](https://github.com/dcloudio/mui),将其中的dist文件夹放到项目中的static文件夹下核心文件引入:在main.js文件中引入:// 引入路由import VueRouter f
·
效果如图所示:
安装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}
]
})
更多推荐
已为社区贡献4条内容
所有评论(0)