vue编辑页面和新增_Vue: elementUI知识点汇总02

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

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

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

axios.interceptors.request.use(config => {  // console.log(config)    config.headers.Authorization = window.sessionStorage.getItem('token')  // 在最后必须 return config  return config})

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

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

Welcome

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页面 ] } ]})

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

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

                            {{item.authName}}                                            {{subItem.authName}}                  saveNavState(activePath) {      window.sessionStorage.setItem('activePath', activePath)            this.activePath = activePath    }

后续...

Vue: elementUI知识点汇总00

Vue: elementUI知识点汇总01

夏听百鸣秋听雨,欢亦念卿,愁亦念卿