07_03.添加返回按钮
2017-11-20 本文已影响0人
Robyn_Luo
1. 效果图
2. 使用mint-ui的css插件：
https://mint-ui.github.io/docs/#/zh-cn2/header
3. 详细分解:
- 就是在头部文件添加一个返回的样式,然后判断是否是首页,如果不是首页就添加样式,如果是首页,就隐藏样式.(v-if和$router.go的使用)
4. 关键代码:
<template>
<header>
<mt-header fixed title="小买卖">
<!-- 返回按钮只在非首页出现 -->
<!-- 通过$route.path那到当前路径比较 -->
<!-- 通过$router.go(-1)方法实现页面返回功能 -->
<mt-button v-if="$route.path != '/index'" v-on:click="$router.go(-1)"
icon="back" slot="left"></mt-button>
</mt-header>
<i></i>
</header>
</template>
<script>
export default {
}
</script>
<style scoped>
header i{
display: block;
height: 40px;
}
</style>
