一、说一下flex布局的属性和方法？

（一）flex布局的定义及相关概念

设置display:flex的元素称为弹性布局/flex布局

1. 容器：设置display:flex的元素
2. 项⽬：容器的⼦元素
3. 两根轴：主轴、交叉轴

（二）属性和方法

1. 容器属性

• flex-direction:row / row-reverse / column / column-reverse
• flex-wrap: wrap / nowrap / wrap-reverse
• justify-content: flex-start / flex-end / center / space-between / space-around
• align-items: flex-start / flex-end / centeralign-content: flex-start / flex-end / center / space-between / space-around

2. 项⽬属性

order / flex-grow / flex-strink / align-self / flex-basis....

3. flex属性

弹性伸缩比，用来划分父元素剩余空间。

二、有一段字符串，怎么把里面全部的井号替换为逗号？

方法一：利用字符串的方法split+数组的join方法

function handleString(str){
    let arr = str.split('#')
    return arr.join(',')
}
//应用
let string = 'addjb#daidisa#djsbakb#ds'
handleString(string)

方法二：利用字符串的方法replaceAll

function handleString(str){
    return str.replaceAll('#',',')
}
//应用
let string = 'addjb#daidisa#djsbakb#ds'
handleString(string)

方法三：利用for循环

function handleString(str){
	for(let i=0;i<str.length;i++){
        if(str.indexOf('#')!==-1){
           str = str.replace('#',',')
        }
    }
    return str
}
//应用
let string = 'addjb#daidisa#djsbakb#ds'
handleString(string)

三、vue的前置守卫怎么使用？

（1）定义

官网： vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航

通俗来说，就是在路由跳转之前做判断，符合条件就通过，不符合再做其他判断处理，这个钩子作用主要是用于登录验证。

const router = new VueRouter({ ... })
​
router.beforeEach((to, from, next) => {
  // ...
})

• to: Route: 到哪去
• from: Route: 从哪来
• next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数

（2）实例

实例来源：转载自史上最全 vue-router 讲解 ！！！ - 掘金 (juejin.cn)

router.beforeEach(async (to, from, next) => {
  // 清除面包屑导航数据
  store.commit('common/SET_BREAD_NAV', [])
  // 是否白名单
  if (isWhiteList(to)) {
    next()
  } else {
    // 未登录,先登录
    try {
      if (!store.state.user.userInfo) {
        await store.dispatch('user/getUserInfo')
        // 登录后判断，是否有角色, 无角色 到平台默认页
        if (!store.state.user.userInfo.permissions || !store.state.user.userInfo.permissions.length) {
          next({ path: '/noPermission' })
        }
      }

      // 登录后判断，是否有访问页面的权限
      if (!hasVisitPermission(to, store.state.user.userInfo)) {
        next({ path: '/404' })
      } else {
        next()
      }
    } catch (err) {
      $error(err)
    }
  }
})