Vue如何 共用一个底部导航栏

1.文件列表

文件列表

---

2.App.vue作为一个公共页面切换的载体

App.vue

---

3.router/index.js 配置

将path如下设置 path: '/' ，则默认Index.vue是首页，默认加载

router/index.js

---

4.下面重点来了，先准备要用的Foot.vue，在Index.vue引用Foot.vue

1).Index.vue的<template>中写入<foot></foot>标签对（任意多个）

2).js中导入Foot文件 import foot from '@/compontents/Foot'（看你template中导入了多少个，保持一一对应）,然后定义需要用的components（保持一一对应）.其中foot保持大小写一致。

---

index.vue

---

5.看成果啦

index页面效果 personnal页面效果

---

6.需要源码的私我0.0