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