首页 Home.vue
<!-- 顶部 Header 区域 -->
<mt-header fixed title="Vue项目">
<span slot="left" @click="goBack" v-show="flag">
<mt-button icon="back">返回</mt-button>
</span>
</mt-header>
<script>
export default {
data() {
return {
flag: false
};
},
created() {
this.flag = this.$route.path === "/home" ? false : true;
},
methods: {
goBack() {
// 点击后退
this.$router.go(-1);
}
},
watch: {
"$route.path": function(newVal) {
if (newVal === "/home") {
this.flag = false;
} else {
this.flag = true;
}
}
}
};
</script>
本文介绍了一个Vue项目中如何实现在导航栏动态显示返回按钮的功能。通过监听路由变化,判断当前页面是否为首页,从而控制返回按钮的显示与隐藏。文章详细展示了使用Vue-router进行页面跳转和组件状态管理的具体实现。
4048

被折叠的 条评论
为什么被折叠?



