path: ‘/member’,
name: ‘member’,
component: member,
},
{
path: ‘/’,
name: ‘首页’,
redirect: ‘/member’,
component: member,
},
{
path: ‘/car’,
name: ‘car’,
component: car,
},
{
path: ‘/my’,
name: ‘my’,
component: my,
},
],
mode: “history”//干掉地址栏里边的#号键
});
export default router
三、开始创建子组件(components文件下新建 footer.vue),注意:底部导航图片需要通过require方式引入,子组件通过props方法来接收父组件传来的值:footIndex1
v-for=“(item,index) in footerImg”
@click=“clickFoo(index)”
:key=“index”
:id=“index”
:class=“index==timepartValue?‘commColor’:‘’”
{{item.name}}
四、在父组件app.vue中引用刚才创建的组件:
import footercon from “@/components/footer”;
注册组件:
components: {
footercon
},
通过v-show="footer_show"来控制底部导航的显示隐藏
此时需要在新建的三个底部导航页面中通过$emit来给父组件app.vue中传值来实现底部显示隐藏:
export default {
data(){
return{}
},
created() {
this.$emit(“footer”, true);
this.$emit(“checkHomeIndex”, 0);
}
this.$emit(“checkHomeIndex”, 0);//用来传当前页面的下标,用来动态切换导航
this.$emit(“footer”, true);//表示此时底部导航显示,false为隐藏
app.vue完整代码: