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即可。