SpringBoot+Vue 07--菜单路由+新界面开发

新界面1 Book(路由)和Person

辅助路由跳转

  • 个人信息界面Person.vue
  • Book.vue
    SpringBoot+Vue 07--菜单路由+新界面开发_第1张图片

菜单实现路由跳转

高亮
SpringBoot+Vue 07--菜单路由+新界面开发_第2张图片
index ↑ 里面是路由里面的path ↓
SpringBoot+Vue 07--菜单路由+新界面开发_第3张图片

把HomeView.vue改名叫User.vue
SpringBoot+Vue 07--菜单路由+新界面开发_第4张图片
路由也改改
SpringBoot+Vue 07--菜单路由+新界面开发_第5张图片
SpringBoot+Vue 07--菜单路由+新界面开发_第6张图片
Book与User页面之间进行切换
SpringBoot+Vue 07--菜单路由+新界面开发_第7张图片
SpringBoot+Vue 07--菜单路由+新界面开发_第8张图片

页面拦截

不登录无法进入其他界面
对所有请求进行拦截,在发送请求前进入拦截:
SpringBoot+Vue 07--菜单路由+新界面开发_第9张图片

新界面2 Book其他

  • 对Book.vue进行操作,可以直接把User.vue

User改为Book,Ctrl+R 把/user逐个替换为/book
SpringBoot+Vue 07--菜单路由+新界面开发_第10张图片
SpringBoot+Vue 07--菜单路由+新界面开发_第11张图片

  • 对User复制粘贴,变成Book
    SpringBoot+Vue 07--菜单路由+新界面开发_第12张图片
    加上这一句使时间可读,否则涉及时间的操作会报错
    SpringBoot+Vue 07--菜单路由+新界面开发_第13张图片
    或者这样也行(但我的不行)
    SpringBoot+Vue 07--菜单路由+新界面开发_第14张图片

  • UserMapper复制粘贴,变成BookMapper
    即可操作数据库了
    SpringBoot+Vue 07--菜单路由+新界面开发_第15张图片

  • UserController复制粘贴,变成BookController
    SpringBoot+Vue 07--菜单路由+新界面开发_第16张图片

  • Book.vue
    SpringBoot+Vue 07--菜单路由+新界面开发_第17张图片
    SpringBoot+Vue 07--菜单路由+新界面开发_第18张图片
    /user 改成 /book

有很多用法可以自己看看
SpringBoot+Vue 07--菜单路由+新界面开发_第19张图片

  • 高亮
    不点击, 直接访问/book时,不会出现高亮。现在修改Aside.vue
    SpringBoot+Vue 07--菜单路由+新界面开发_第20张图片
    SpringBoot+Vue 07--菜单路由+新界面开发_第21张图片
    SpringBoot+Vue 07--菜单路由+新界面开发_第22张图片

你可能感兴趣的:(vue,vue)