注:业余时间学习,以此作为笔记

知识点一:通过axios拦截器添加token认证

1. 添加axios拦截器
2. 添加拦截器在请求头中添加Authorization属性
3. 将token值放入添加的属性中

<!--第一步: 添加axios拦截器 -->
axios.interceptors.request.use(config => {
// console.log(config)\
<!-- 第二,三步 添加拦截器在请求头中添加Authorization属性 将token值放入添加的属性中-->
config.headers.Authorization = window.sessionStorage.getItem('token')
// 在最后必须 return config
return config
})

知识点二:首页路由重定向

1. 新增welcomen路由组件
2. 在router.js导入并配置
3. 在home组件配置路由占位符

<!-- 第一步: 新增welcomen路由组件 -->
<template>
<div>
<h3>Welcome</h3>
</div>
</template>
<!-- 第二步: 在router.js导入并配置-->
import Vue from 'vue'
import Router from 'vue-router'
import Welcome from './components/Welcome.vue' // 导入welcome组件
const router = new Router({
routes: [
{ path: '/', redirect: '/login' },
{ path: '/login', component: Login },
{
path: '/home',
component: Home,
redirect: '/welcome', //当输入/home路径时,重定向到/welcome页面
children: [ // 页面 /welcome 为 /home页面的子组件
{ path: '/welcome', component: Welcome } //在home页面重定向到welcome页面
]
}
]
})
<!--第三步: 在home组件配置路由占位符 -->
<el-main>
<!-- 路由占位符 -->
<router-view></router-view>
</el-main>

知识点三:选中菜单高亮显示

1. 使用elementUI中属性default-active,在菜单中定义属性
2. 在菜单中添加点击事件,保存链接导航状态
3. 将激活的菜单保存到sessionStorage,便于下次取出
4. 给点击菜单重新赋值

<!-- 第一步: 使用elementUI中属性default-active,在菜单中定义属性 -->
<el-menu background-color="#333744" text-color="#fff" active-text-color="#409EFF" unique-opened :collapse="isCollapse" :collapse-transition="false"
router :default-active="activePath">
<!-- 一级菜单 -->
<el-submenu :index="item.id + ''" v-for="item in menulist" :key="item.id">
<!-- 一级菜单的模板区域 -->
<template slot="title">
<!-- 图标 -->
<i :class="iconsObj[item.id]"></i>
<!-- 文本 -->
<span>{{item.authName}}</span>
</template>
<!-- 二级菜单 -->
<!-- 第二步: 在菜单中添加点击事件,保存链接导航状态 -->
<el-menu-item :index="'/' + subItem.path" v-for="subItem in item.children" :key="subItem.id" @click="saveNavState('/' + subItem.path)">
<template slot="title">
<!-- 图标 -->
<i class="el-icon-menu"></i>
<!-- 文本 -->
<span>{{subItem.authName}}</span>
</template>
</el-menu-item>
</el-submenu>
</el-menu>
<!-- 第三步: 保存链接的激活状态 -->
saveNavState(activePath) {
window.sessionStorage.setItem('activePath', activePath)
<!--第四步: 给点击菜单重新赋值 -->
this.activePath = activePath
}

后续...

Vue: elementUI知识点汇总00

Vue: elementUI知识点汇总01