HMVue7.4【路由综合案例-后台管理】

 

1 案例效果

 

 

 

2 案例所涉及知识点

 

 

3 初始项目

 

npm install

npm audit fix

npm run serve

http://localhost:8080/

4 安装和配置路由

新建终端,安装vue-router

 安装成功后关闭该终端即可

 

 

5 基于路由渲染登录组件

 

 

 

 

 

 

 

6 模拟登录功能

 

 

 

 

 

 

 

 

 

 

 

 

 token认证时token的格式:Bearer xxxxx,注意空格一定要有

https://www.showdoc.com.cn/escook/3707490625528400

 

 

7 后台主页的基础布局

 

 

 

8 退出登录&控制访问权限

 

 

存在的问题:登录成功后,退出登录,直接访问http://localhost:8080/#/home可以进入后台主页

解决:全局前置守卫

 

 登录页面输入admin&admin可以成功登录

登录退出后,地址栏直接访问http://localhost:8080/#/home会跳转到登录页面

或者说未登录时直接地址栏访问http://localhost:8080/#/home会跳转到登录页面

 

 

 

9 实现子路由的嵌套展示

 

 

 

 

 

 

 

 

 

10 点击进入用户详情页

 

 

 

 

 

 

 

 

 

 

11 用户详情页传参

 

 

 

 

 

 

 

 

 

 

 

12 扩展:如何控制页面权限

如果项目中有多个页面都需要访问权限,解决方案1:通过||将多个判断条件拼起来(不推荐)

 解决方案2:

 

 方案2的另一种实现方法:

 

 

 

 

 

 

 

posted @ 2021-11-28 20:55  yub4by  阅读(66)  评论(0)    收藏  举报