首先配置路由

底部有三个链接

• 先在view里面创建三个页面；
• 在router/index.ts里面添加跳转路径：
  • 首先引入这三个文件

• 添加路径
  • 路径里面有默认路径和路径输入错时的跳转。

如何显示在页面上

<router-view>的作用

• 当切换路径页面里面的内容就会显示在 <router-view>里面；
• 这个 <router-view>就放在App.vue里面；

<router-link>的作用

• 切换的点击链接如何显示在页面上；
• 因为切换的点击链接是一直显示在底部的导肮<Nav></Nav>里的

Nav放在哪里的？

• Nav是一个底部导航栏，是放在三个页面的底部的。
• 因为三个页面都要用<Nav></Nav>,所以将其封装为一个组件；
• 因为<Nav></Nav>需要在main.ts全局引入，省的单个文件引入麻烦；

三个页面的布局设计

• 因为三个页面的布局也是一样的，所以将他们的格式也封装为一个组件<Layout/>；

• 在三个页面里面引入<Layout/>

• 把页面要显示的信息放在<Layout/>里面，<Layout/>通过插槽来接收；