写这篇文的时候发现太多的界面实现的流程都差不多，基本都是从ui库中获取想要的组件，然后配置路由。重复的工作我不写或者简略写写，只详细写自己比较生疏的技术实现。
项目布局的实现
路由配置
1. 在src\components 目录下新建布局组件文件Layout.vue（基础布局的文件都放在components目录下）
2. 在router中增加路由，进入系统的第一个页面（即首页），路由路径一般设置为‘/’
布局实现
1.可以从ui库中找喜欢的布局组件，但简单的布局自己写样式就可以了（本项目布局是自己写的）
2.基础布局组件的组成部分，放在components目录下创建新的文件夹内，组成部分的样式写在基础布局组件（layout）内
3.在layout中导入子组件，注册子组件，渲染在template中
<template>
<div>
<app-header></app-header>
<app-navbar></app-navbar>
<app-main></app-main>
</div>
</template>
<script>
// 会导入 ./AppHeader 下面的 index.vue组件
import AppHeader from './AppHeader'
import AppNavbar from './AppNavbar'
import AppMain from './AppMain'
export default {
components: {AppHeader, AppNavbar, AppMain}
}
</script>4.普通组件放在views目录中
每个目录下都有一个index.vue文件
组件渲染的方式（*）
1.router中导入全部组件并添加路由（layout中包括了组成布局的三个组件）
router.js代码如下
import Vue from "vue";
import Router from "vue-router";
import Login from "./views/login"
import Layout from "@/components/Layout.vue"
import Home from '@/views/home'
import Member from '@/views/member'
import Supplier from '@/views/supplier'
import Goods from '@/views/goods'
import Staff from '@/views/staff'
Vue.use(Router);
export default new Router({
routes: [
{
path: '/login',
name: 'login',
component: Login
},
{
path: '/',
name: 'layout',
component: Layout,
redirect: '/home', //默认选中该路由
children: [
{
path: '/home',
component: Home,
meta: { title: '首页' }
},
]
},
{
path: '/member',
component: Layout,
children: [{
path: '/member/',
component: Member,
meta: { title: '会员管理' }
}]
},
{
path: '/supplier',
component: Layout,
children: [{
path: '/supplier/',
component: Supplier,
meta: { title: '供应商管理' }
}]
},
{
path: '/goods',
component: Layout,
children: [{
path: '/goods/',
component: Goods,
meta: { title: '商品管理' }
}]
},
{
path: '/staff',
component: Layout,
children: [{
path: '/staff/',
component: Staff,
meta: { title: '员工管理' }
}]
},
]
})2.main.js导入router，在main的vue实例中注册router
import Vue from "vue";
// 注意引入在 Vue的下面
// ElementUI 组件库
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from "./App.vue";
//导入router
import router from "./router";
// 使用 ElementUI
Vue.use(ElementUI);
new Vue({
//注册router
router,
render: h => h(App)
}).$mount("#app");3.vue实例渲染在app.vue中
退出系统逻辑实现
1. 在api下的login.js中添加logout函数，在组件中导入该函数
export function logout(token) {
return request({
url: `/user/logout`,
method: 'post',
data: {
token //token: token
}
})
}2. 把该api中的函数import进目标组件中
3. 退出系统实现代码
通过key值获取token——>将参数传入logout函数中——>在localstorage中移除token和用户信息——>回到登录页面
// 退出系统
handleLogout() {
logout(localStorage.getItem("mxg-msm-token")).then(response => {
const resp = response.data;
if (resp.flag) {
// 退出成功
// 清除本地数据
localStorage.removeItem("mxg-msm-token");
localStorage.removeItem("mxg-msm-user");
// 回到登录页面
this.$router.push("/login");
} else {
this.$message({
message: resp.message,
type: "warning",
duration: 500 // 弹出停留时间
});
}
});
},权限设置（*）
需求：当用户未登录时，不让访问非登录页面，应该回到登录页面进行登录。
实现：采用 Vue Router 中的路由前置钩子函数( beforeEach )，在前置中根据路由地址校验是否此路由是否允许访问。
1. 新建 src\permission.js 权限校验文件
import router from './router'
import {getUserInfo} from './api/login'
router.beforeEach((to, from , next) => {
// 获取token
const token = localStorage.getItem('mxg-msm-token')
console.log('token', token)
if(!token) {
// 如果没有获取到，
// 要访问非登录页面，则不让访问，加到登录页面 /login
if(to.path !== '/login') {
next({path: '/login'})
}else {
// 请求登录页面 /login
next()
}
}else {
// 获取到token,
// 请求路由 /login ，那就去目标路由
if(to.path === '/login') {
next()
}else {
// 请求路由非登录页面，先在本地查看是否有用户信息，
const userInfo = localStorage.getItem('mxg-msm-user')
if(userInfo) {
// 本地获取到，则直接让它去目标路由
next()
}else {
// 如果本地没有用户信息， 就通过token去获取用户信息，
getUserInfo(token).then(response => {
const resp = response.data
if(resp.flag) {
// 如果获取到用户信息，则进行非登录页面，否则回到登录页面
// 保存到本地
localStorage.setItem('mxg-msm-user', JSON.stringify(resp.data))
next()
}else {
// 未获取到用户信息，重新登录
next({path: '/login'})
}
})
}
}
}
})通过router路由前置钩子函数 beforeEach() ，在跳转路由前进行拦截判断是否已经登录，如果已登录，则进行路由跳转，如果没有则回到登录页前置路由钩子函数
to ：即将要进入的目标路由对象
from ：当前导航正要离开的路由对象
next : 调用该方法，进入目标路由
2. 将权限添加到全局中
在main.js中添加代码
import './permission'
