一、确定页面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键就可自动引入,可在每个组件里单独引入