案例：后台管理案例(VUE路由案例)
2024-05-11 23:01:32
目录
1. 素材下载：
2. 案例效果
3. 案例用到的知识点
4. 案例各个部分的实例代码(这里只提供修改的代码)
项目目录：
路由模块index.js部分：
main.js部分：
App.vue部分：
MyHome.vue部分：
MyLogin.vue部分：
MyUserDetail.vue部分：
MyAside.vue部分：
MyHeader.vue部分：
MyUsers.vue部分:
pathArr.js部分：
其他部分：
5.VUE路由总结
1. 素材下载：
练习资料素材上传到如下链接，需要的自行下载：
案例：后台管理系统（VUE路由）素材
https://download.csdn.net/download/qq_57587705/85320825
2. 案例效果
3. 案例用到的知识点
⚫ 命名路由
⚫ 路由重定向
⚫ 导航守卫
⚫嵌套路由
⚫ 动态路由匹配
⚫ 编程式导航
4. 案例各个部分的实例代码(这里只提供修改的代码)
项目目录：
路由模块index.js部分：
import Vue from 'vue'
import VueRouter from 'vue-router'
import pathArr from '@/router/pathArr.js'// 导入需要的组件
import Login from '@/components/MyLogin.vue'
import Home from '@/components/MyHome.vue'import Users from '@/components/menus/MyUsers.vue'
import Rights from '@/components/menus/MyRights.vue'
import Goods from '@/components/menus/MyGoods.vue'
import Orders from '@/components/menus/MyOrders.vue'
import Settings from '@/components/menus/MySettings.vue'
import UserDetail from '@/components/user/MyUserDetail.vue'Vue.use(VueRouter)const router = new VueRouter({routes: [{ path: '/', redirect: '/login' },// 登录的路由规则{ path: '/login', component: Login },// 后台主页的路由规则{path: '/home',component: Home,redirect: '/home/users',children: [{ path: 'users', component: Users },{ path: 'rights', component: Rights },{ path: 'goods', component: Goods },{ path: 'orders', component: Orders },{ path: 'settings', component: Settings },// 用户详情页的路由规则{ path: 'userinfo/:id', component: UserDetail, props: true }]}]
})// 全局前置守卫
router.beforeEach(function(to, from, next) {if (pathArr.indexOf(to.path) !== -1) {const token = localStorage.getItem('token')if (token) {next()} else {next('/login')}} else {next()}
})export default router
main.js部分：
import Vue from 'vue'
import App from './App.vue'
// 导入路由模块
import router from '@/router'// 导入样式
import './assets/css/bootstrap.css'
import './index.css'Vue.config.productionTip = falsenew Vue({render: h => h(App),router
}).$mount('#app')
App.vue部分：
<template><!-- 占位符 --><router-view></router-view>
</template><script>
export default {name: 'MyApp'
}
</script><style lang="less" scoped></style>
MyHome.vue部分：
<template><div class="home-container"><!-- 头部区域 --><MyHeader></MyHeader><!-- 页面主体区域 --><div class="home-main-box"><!-- 左侧边栏 --><MyAside></MyAside><!-- 右侧内容主体区域 --><div class="home-main-body"><router-view></router-view></div></div></div>
</template><script>
// 头部区域组件
import MyHeader from './subcomponents/MyHeader.vue'
// 左侧边栏组件
import MyAside from './subcomponents/MyAside.vue'export default {name: 'MyHome',// 注册组件components: {MyHeader,MyAside}
}
</script><style lang="less" scoped>
.home-container {height: 100%;display: flex;flex-direction: column;.home-main-box {height: 100%;display: flex;.home-main-body {padding: 15px;flex: 1;}}
}
</style>
MyLogin.vue部分：
<template><div class="login-container"><div class="login-box"><!-- 头像区域 --><div class="text-center avatar-box"><img src="../assets/logo.png" class="img-thumbnail avatar" alt="" /></div><!-- 表单区域 --><div class="form-login p-4"><!-- 登录名称 --><div class="form-group form-inline"><label for="username">登录名称</label><inputtype="text"class="form-control ml-2"id="username"placeholder="请输入登录名称"autocomplete="off"v-model.trim="username"/></div><!-- 登录密码 --><div class="form-group form-inline"><label for="password">登录密码</label><inputtype="password"class="form-control ml-2"id="password"placeholder="请输入登录密码"v-model.trim="password"/></div><!-- 登录和重置按钮 --><div class="form-group form-inline d-flex justify-content-end"><button type="button" class="btn btn-secondary mr-2" @click="reset">重置</button><button type="button" class="btn btn-primary" @click="login">登录</button></div></div></div></div>
</template><script>
export default {name: 'MyLogin',data() {return {username: '',password: ''}},methods: {reset() {this.username = ''this.password = ''},login() {if (this.username === 'admin' && this.password === '666666') {// 登录成功// 1. 存储 tokenlocalStorage.setItem('token', 'Bearer xxxx')// 2. 跳转到后台主页this.$router.push('/home')} else {// 登录失败localStorage.removeItem('token')}}}
}
</script><style lang="less" scoped>
.login-container {background-color: #35495e;height: 100%;.login-box {width: 400px;height: 250px;background-color: #fff;border-radius: 3px;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);.form-login {position: absolute;bottom: 0;left: 0;width: 100%;box-sizing: border-box;}}
}.form-control {flex: 1;
}.avatar-box {position: absolute;width: 100%;top: -65px;left: 0;.avatar {width: 120px;height: 120px;border-radius: 50% !important;box-shadow: 0 0 6px #efefef;}
}
</style>
MyUserDetail.vue部分：
<template><div><button type="button" class="btn btn-light btn-sm" @click="$router.back()">后退</button><h4 class="text-center">用户详情 --- {{ id }}</h4></div>
</template><script>
export default {name: 'MyUserDetail',props: ['id']
}
</script><style lang="less" scoped></style>
MyAside.vue部分：
<template><div class="layout-aside-container"><!-- 左侧边栏列表 --><ul class="user-select-none menu"><li class="menu-item"><router-link to="/home/users">用户管理</router-link></li><li class="menu-item"><router-link to="/home/rights">权限管理</router-link></li><li class="menu-item"><router-link to="/home/goods">商品管理</router-link></li><li class="menu-item"><router-link to="/home/orders">订单管理</router-link></li><li class="menu-item"><router-link to="/home/settings">系统设置</router-link></li></ul></div>
</template><script>
export default {name: 'MyAside'
}
</script><style lang="less" scoped>
.layout-aside-container {width: 250px;height: 100%;border-right: 1px solid #eaeaea;
}.menu {list-style-type: none;padding: 0;.menu-item {line-height: 50px;font-weight: bold;font-size: 14px;font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans','Helvetica Neue', sans-serif;&:hover {background-color: #efefef;cursor: pointer;}a {display: block;color: black;padding-left: 30px;&:hover {text-decoration: none;}}}
}// 设置路由高亮效果
.router-link-active {background-color: #efefef;box-sizing: border-box;position: relative;// 伪元素实现路由高亮效果&::before {content: ' ';display: block;width: 4px;height: 100%;position: absolute;left: 0;top: 0;background-color: #42b983;}
}
</style>
MyHeader.vue部分：
<template><div class="layout-header-container d-flex justify-content-between align-items-center p-3"><!-- 左侧 logo 和 标题区域 --><div class="layout-header-left d-flex align-items-center user-select-none"><!-- logo --><img class="layout-header-left-img" src="../../assets/heima.png" alt="" /><!-- 标题 --><h4 class="layout-header-left-title ml-3">黑马后台管理系统</h4></div><!-- 右侧按钮区域 --><div class="layout-header-right"><button type="button" class="btn btn-light" @click="logout">退出登录</button></div></div>
</template><script>
export default {name: 'MyHeader',methods: {logout() {// 1. 清空 tokenlocalStorage.removeItem('token')// 2. 跳转到登录页面this.$router.push('/login')}}
}
</script><style lang="less" scoped>
.layout-header-container {height: 60px;border-bottom: 1px solid #eaeaea;
}.layout-header-left-img {height: 50px;
}
</style>
MyUsers.vue部分:
<template><div><!-- 标题 --><h4 class="text-center">用户管理</h4><!-- 用户列表 --><table class="table table-bordered table-striped table-hover"><thead><tr><th>#</th><th>姓名</th><th>年龄</th><th>头衔</th><th>操作</th></tr></thead><tbody><tr v-for="item in userlist" :key="item.id"><td>{{ item.id }}</td><td>{{ item.name }}</td><td>{{ item.age }}</td><td>{{ item.position }}</td><td><a href="#" @click.prevent="gotoDetail(item.id)">详情</a></td></tr></tbody></table></div>
</template><script>
export default {name: 'MyUser',data() {return {// 用户列表数据userlist: [{ id: 1, name: '嬴政', age: 18, position: '始皇帝' },{ id: 2, name: '李斯', age: 35, position: '丞相' },{ id: 3, name: '吕不韦', age: 50, position: '商人' },{ id: 4, name: '赵姬', age: 48, position: '王太后' }]}},methods: {gotoDetail(id) {// /home/userinfo/1// /home/userinfo/2// /home/userinfo/3this.$router.push('/home/userinfo/' + id)}}
}
</script><style lang="less" scoped></style>
pathArr.js部分：
这个 js 文件用来 存储权限路径；
权限路径可以单拿出来，但是建议封装到一个模块中（模块化思想）
export default ['/home', '/home/users', '/home/rights']
其他部分：
本案例中，下面四个组件没有改变，引用了就可以了
其他配置文件均没有变化
5.VUE路由总结
① 能够知道如何在 vue 中配置路由
createRouter、app.use(router)
② 能够知道如何使用嵌套路由
通过 children 属性进行路由嵌套
③ 能够知道如何实现动态路由匹配
使用冒号声明参数项、this.$route.params、props: true
④ 能够知道如何使用编程式导航
this.$router.push、this.$router.go
⑤ 能够知道如何使用导航守卫
路由实例.beforeEach((to, from, next) => { /* 必须调 next 函数 */ })
案例：后台管理案例(VUE路由案例)相关推荐
- [Vue.js] 路由 -- 基于vue-router的案例--后台管理
基于vue-router的案例 感觉好多,啊啊啊!!! 实现效果 实现步骤 抽离并渲染App根组件 将左侧菜单改造为路由链接 创建左侧菜单对应的路由组件 在右侧主体区域添加路由占位符 添加子路由规则 ...
- Vue - 路由 - 案例
01 - 模拟路由 <!DOCTYPE html> <html lang="en"><head><meta charset="U ...
- SSH2（后台管理页面+Vue+Element-UI+动态树+分页+正则表达）
后台搭建-前端展示 1:加入maven項目 1.1创建如图中的工作流程包+配置文件 1.2导入Spring容器框架(业务逻辑处理) 2.Base(接口工具类): 3.SYS模块包: **Util工具类 ...
- 后台管理动态添加路由
路由分为静态路由和动态路由 静态路由和动态路由的优缺点 静态路由与动态路由优缺点-1.在中大型项目,采用的都是动态路由方式,因为后台导航目录运营人员可能会新增菜单,新增菜单后,前端人员得在路由表填加上 ...
- 云答题微信小程序 实现 前端加后台管理
1.为什么要使用微信云开发 微信云开发自己是不需要域名(备案的域名),服务器,搭建数据库等. 2.使用技术 微信小程序+相关云接口 java (SpringBoot+Maven) 后台管理使用 VUE ...
- Vue实现后台管理案例
Vue实现后台管理案例(★★★) 案例效果: 点击左侧的"用户管理","权限管理","商品管理","订单管理",&quo ...
- [Vue.js] 基础 -- 综合案例 -- 图书管理
综合案例 – 图书管理 补充知识(数组相关API) 变异方法(修改原有数据) push() pop() shift() unshift() splice() sort() reverse() 替换数组 ...
- vue案例-图书管理
1.学习vue时做的一个小案例,本身案例很简单,经过优化又加些比较常用的功能,比如在添加图书前,先判断编号是否存在,并提示给用户,并且编号文本框只能输入数字等等优化. 2.使用到数组数据,方法,监视, ...
- Axure经典案例高保真交互下载（数据统计图高保真原型+雷达图+条形图+折线图+web端通用后台管理原型+统计表、统计分析+用户画像分析）
Axure原型作品内容包括:数据统计图高保真原型+雷达图+条形图+折线图+web端通用后台管理原型+统计表.统计分析+用户画像分析+认证监控预警 以下是Axure部分作品图片截图展示,想看交互效果的请 ...
最新文章
- SpringBoot初体验
- CSRF***与防御
- DataTable转成字符串复制到txt文本的小例子
- 从底层重学 Java 之 Stream 初探 Gitchat连接
- 公众号第三方平台开发 - 教程五 代公众号发起网页授权源码
- 力扣572. 另一棵树的子树（JavaScript）
- iOS根据经纬度获得地理名称
- 2017.3.11[bzoj2440][中山市选2011]完全平方数
- MySQL要不要用函数_2.mysql函数的使用
- 蓝桥杯 C语言 试题 历届试题 高僧斗法
- Centos7.6搭建FTP服务器
- 统计学计算机数据输入,数据输入是什么意思
- 文通科技OCR识别|电子护照阅读器
- namedtuple
- VisualStudio2012的序列号
- P4716 【模板】最小树形图（朱刘算法模板题）
- 【入门】求长方形的周长和面积
- HC/LS/HCT/F系列的区别
- Virtualbox共享文件夹权限
- 统计计量 ：统计学公开课大盘点（附下载）