vue自定义组件实现底部导航栏动态切换，前端开发工程学习

routes: [

{

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完整代码：