文章目录
后台管理案例
一、安装和配置路由
-
安装路由
npm i [email protected] -S
-
创建路由模块
src/router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter()
export default router
3.main.js
挂载路由
// 1.导入模块
import router from '@/router'
new Vue({
render: h => h(App),
router // 2.挂载路由
}).$mount('#app')
二、基于路由渲染登录组件
router/index.js
路由模块声明路由规则
// 1.导入登录组件
import MyLogin from '@/components/MyLogin.vue'
const router = new VueRouter({
routes: [
// 2.登录的路由规则
{
path: '/login',
component: MyLogin
}
]
})
-
App.vue
组件启用 路由占位符<div> <!-- 路由占位符 --> <router-view></router-view> </div>
- 路由重定向
const router = new VueRouter({ routes: [{ // 路由重定向 path: '/', redirect: '/login' }, // 登录的路由规则 { path: '/login', component: Login } ] })
三、模拟登录功能
1. `MyLogin.vue` 输入框双向绑定
- trim 去除多余空格
<input type="text" class="form-control ml-2" id="username" placeholder="请输入登录名称" autocomplete="off" v-model.trim="username" />
<input type="password" class="form-control ml-2" id="password" placeholder="请输入登录密码" v-model.trim="password" />
data() {
return {
username: '',
password: ''
}
}
- 给重置按钮实现重置功能
<button type="button" class="btn btn-secondary mr-2" @click="reset">重置</button>
// 重置
reset() {
this.username = ''
this.password = ''
},
- 给登录按钮实现登录功能
- 登录成功 –> 存储token
- 登录失败 –> 移除token
<button type="button" class="btn btn-primary" @click="login">登录</button>
// 登录
login() {
if (this.username === 'admin' && this.password === '123456') {
localStorage.setItem('token', 'Bearer xxxx')
this.$router.push('/home')
} else {
localStorage.removeItem('token')
}
}
Token 认证时 token格式
Bearer
Bearer + 空格 固定写法
四、后台主页基础布局
-
声明后台主页
/home
的路由规则router/index.js
// 导入主页组件 import Home from '@/components/MyHome.vue'
// 后台主页 { path: '/home', component: Home }
-
MyHome.vue
挂载组件
<div class="home-container">
<!-- 头部区域 -->
<MyHeader></MyHeader>
<!-- 页面主体区域 -->
<div class="home-main-box">
<!-- 左侧边栏 -->
<MyAside></MyAside>
<!-- 右侧主体区域 -->
<div class="home-main-body">
</div>
</div>
五、退出登录并控制访问权限
- 实现退出功能
- 绑定按钮
- 退出
- 清空token
- 跳转登录页面
src/components/subcomponents/MyHeader.vue
<button type="button" class="btn btn-light" @click="logout">退出登录</button>
// 退出登录
logout() {
localStorage.removeItem('token')
this.$router.push('/login')
}
-
访问权限控制 全局前置守卫
/src/router/index.js
router.beforeEach(function(to,from,next){
if (to.path === '/home') {
// 要访问后台主页,需要判断是否有 token
const token = localStorage.getItem('token')
if (token) {
next()
} else {
// 没有登录,强制跳转到登录页
next('/login')
}
} else {
next()
}
})
六、子路由嵌套显示
- 左侧边栏 添加路由跳转链接
MyAside.vue
<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>
MyHome.vue
子路由占位符
<!-- 右侧主体区域 -->
<div class="home-main-body">