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的另一种实现方法：