vue-shop项目第二天（用于个人学习的记录）

vue-shop项目第二天

1.实现路由导航守卫功能。

router.beforeEach((to, from, next) => {
  // to 将要访问的路径   from 代表从哪个路径跳转而来   next 是一个函数，//表示放行
  //     next()  放行    next('/login')  强制跳转
  if (to.path === '/login') return next()
  // 获取token
  const tokenStr = window.sessionStorage.getItem('token')
  if (!tokenStr) return next('/login')
  next()})

2.实现退出功能： 清除掉本地的session，然后编程式跳转到登录页面。

window.sessionStorage.clear()

3.eslint格式问题，可以再项目根路径下创建.prettierrc后缀的文件，来进行对格式化代码（shift + alt + f）操作的配置

{
  "semi": false,
  "singleQuote": true
}

在eslint.js中做以下修改（表示禁用这个与法规则）

'space-before-function-paren': 0

4。element.js中引入插件代码的简化。

5.vscode中 ctrl + ` 可以打开终端。

6.推送子分支到云端仓库:(第一次推送子分支到云端)

$git checkout login
$git push -u origin login

三。主页布局的开发

1.导入需要的element组件，再element-ui找到合适的页面布局。再进行调整，组件中的标签名,即为它的类名。

2.利用flex布局完成header部分的开发。

3.l利用element组件完成侧边栏 组件的开发（NavMenu）组件。

4.利用axios拦截器拦截向后端发起的请求，并为他添加上后端规定的字段，为了避免前端没有权限而获得后端的数据，以此来保证数据的安全。

axios.interceptors.request.use(config => {
  config.headers.Authorization = window.sessionStorage.getItem('token')
  return config
})

5.获取左侧菜单数据：[1.4.2. 左侧菜单权限]

1.在行为区域利用created生命周期函数调用方法，方法向后端发送请求

if (res.meta.status != 200) return this.$message.error(res.meta.msg)
      this.menulist = res.data

循环得到的数据把菜单渲染完成。添加图标，利用对象的结构（类似于哈希树）

2.完成侧边栏菜单上的收起功能，在菜单组件中提供了凡方法。

3.完善页面的主体功能，在主体区域放置占位符，再再home路由的下面注册子路由规则。之后需要书写子组件的内容

4.左侧菜单栏为一级菜单添加属性NavMenu组件中的router属性，该属性根据耳机菜单的index属性的值作为path的路径进行跳转。

5.完成左侧用户列表组件：问题1：切换xing二级菜单的高亮效果，先添加NavMenu组件中的属性添加到mnu标签上，再把每次点击的值存储到浏览器中。

6.users组件中完成面包屑导航，卡片视图。

。。。。。。写数学作业去喽“ 。”