07_03.添加返回按钮

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>
4. 其余整体需要执行的话,在07_02.新闻详情里面的header.vue里面添加上面的代码,然后执行webpack-dev-server即可。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容