01提纲

创建基本结构、侧边导航栏、登录验证、改写push、repalce解决重复路径报错
github地址：github.com/Yado-yu/yad…

1基本结构创建

使用脚手架创建基本结构，删除多余文件

2侧边导航栏

1、使用elementUI和编程路由完成

2、重复点击路径时会发生如下报错

此时在router/index.js中改写push、replace方法

//改写push方法，解决重复路径跳转报错问题
const oPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(...args) {
	// console.log(oPush.call(this, ...args));
	return oPush.call(this, ...args).catch(err => err)
}
//改写replace方法，解决重复路径跳转报错问题
const oReplace = VueRouter.prototype.replace
VueRouter.prototype.replace = function replace(...args) {
	// console.log(oPush.call(this, ...args));
	return oReplace.call(this, ...args).catch(err => err)
}

3设置简单的登录验证

1、在login中给登录按钮绑定点击事件，当点击时验证登录

loginHandler(){
            if(!this.userName||!this.passWord) {
                this.$message.error('账号或密码为空！')
                return
            }
            //用户名为'admin',密码为'123'
            if(this.userName !== 'admin' || this.passWord !== '123') {
                this.$message.error('账号或密码错误！')
                return
            }
            //向浏览器中加入token，用于后面的路由守卫验证登录
            sessionStorage.setItem('token', '123')
            this.$router.replace('/')
        }

2、在根目录中创建路由守卫文件routerAuth.js，代码如下：

export default function routerAuth(router) { 
    router.beforeEach((to, from, next) => {
        console.log(to)
        const token = sessionStorage.getItem('token')
        if (token || to.path === '/login') {
            next();
            return
        }
        next('/login');
        
    })
    //浏览器标题
    router.afterEach((to) => {
        document.title = to.meta && to.meta.title ? `${to.meta.title}-宿舍管理系统` : '宿舍管理系统'
    })
}