layui点击左侧导航栏在右侧body显示_Vue记账项目-导航栏

一、确定页面url

• #/money记账
• #/labels标签
• #/statistics统计
• 默认进入#/money
• 添加一个404页面

添加代码

• router/index.ts添加router，配置4个路径对应组件
• 初始化组件
• 将router传给new Vue()
• 在App组件里用<router-view/>给出router渲染区域

添加路径

初始化组件

在App组件里用<router-view/>给出router渲染区域，根据不同路径显示不同内容

效果：

设置切换路径

添加一个404页面

二、将Nav组件做成全局组件

有的页面不需要引入这个Nav,不好添加和删除，有的页面不需要显示也隐藏不好，因此创建Nav.vue,将HTML放到组件里

局部引入Nav组件,在每个组件的options.component里加，webstorm里直接打<Nav按tab键就可自动引入，可在每个组件里单独引入