Vue使用中遇到问题汇总（二）

1、vue cli使用npm run dev报错cannot get /

　　config/index.js里有两个环境：一个是build，一个dev。

　　在config/index.js里面修改，build:{assetsPublicPath:'./'}；dev里面不需要修改，dev:{assetsPublickPath:'/'}。我本来在window上面开发的，后面移到linux上面，刚开始报错，我就把dev里面的路径改了，不报错，但是浏览器提示cannot GET /，怎么都找不到原因，就把dev路径改回去了，重新再npm run dev一次，就成功了。

2、stylus的&使用的问题，其实是熟悉css写法的问题，跟css写法大同小异的

 

　　这两种不同class就是写的时候有无空格的问题，当第二种你采用有空格的写法的话，是不生效的，因为默认是去子集找那个class=is-active的元素了

//第一种需要空格
.el-menu-toggle{
  & .icon-menu{}
}
//第二种不能加空格
.el-menu-item{
  &:hover{
    background-color $--background-color-menu-hover
    font-weight bolder
  }
  &.is-active{
    border-left 3px solid #409Eff;
    background-color $--background-color-menu-active;
    font-weight bolder
  }
}

3、使用vue-cli+webpack创建的项目，修改文件名称或者更改文件的位置，运营时会报错，是因为npm项目，在安装依赖（node_nodules）时，会记录当前的文件路径，当修改之后就无法正常启动。

　　解决办法：

　　（1）删除 node_modules 文件夹（如果修改项目名称，需要在package.json中修改对应的name）

　　（2）重新安装依赖 cnpm install

　　（3）启动项目 cnpm run dev

4、axios提交表单数据到后台，采用post方式

let config = {
    url:'/api/sr/aq/updt',
    method:'post',
    params:JSON.stringify(this.aqForm),//表单数据
    headers:{'Content-Type':'application/json'}
}
axios.post(config.url, JSON.stringify(this.aqForm), {headers:{'Content-Type':'application/json'}})
.then((response)=>{
    this.updateSR = false
})

　　采用config形式

submitForm(){
    let config={
        url:'/api/submitSR',
        method:'post',
        data:JSON.stringify(this.formData),
        headers:{'Content-Type':'application/json'}
    }
    axios(config).then((response) => {
        if(response.status == 200){
            console.log('success')
        }else{
            console.log('Error Code:' + response.status)
        }
    }).catch((e)=>{
        console.log(e)
    })
}

　　主要就是data参数、和header头信息要设置，这种传递格式就是payload格式

5、vue获取当前事件的dom元素： var thisDom = e.currentTarget;

　　在vue里面，经常用到click，如何获取执行click事件的当前dom对象呢？

<span @click="refresh($event,item.imgUrl)">事件</span> 

refresh:function(e,src){  
    //vue获取当前事件的dom元素     
    var thisDom = e.currentTarget;  
}

6、图片验证码刷新

<el-form-item v-if="errorCount >= 1 " prop="captchaCode" :rules="rules.required">
    <el-input v-model="login_pwd.captchaCode" class="code-input" placeholder="请输入图形验证码"></el-input>
    <img class="img_valid" @click="rnd = Math.random()" :src="'/api/code/getCaptchaImage?rnd=' + rnd">
</el-form-item>

　　原理：当一个<img>的src改变时，页面会自动刷新这个<img>

　　code/getCaptchaImage，即是后台接口地址

7、方法传值：我们在input中的方法希望获取input的value，怎么获取呢？

　　可以通过$event这个对象，通过将$event传入方法

<input type="text" value="value" @input="change($event)"/>

//我们可以成功的拿到我们希望的值
change (e) {
  console.log(e.target.value)
  this.value = e.target.value
}

8、v-cloak

　　如果出现{{}}的短暂出现的情况，可以通过添加v-cloak来处理。

　　这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

9、通过路由元信息meta实现不同路由展现不同页面

<template>
  <el-container :class="['app uf-col']">
    <template v-if="$route.meta.fullScreen">
      <router-view></router-view>
    </template>
    <template v-else-if="$route.meta.homePages">
      <Nav></Nav>
      <router-view></router-view>
    </template>
    <template v-else>
      <WHeader></WHeader>
      <el-container>
        <WMenu></WMenu>
        <router-view></router-view>
      </el-container>
    </template>
  </el-container>
</template>

//系统模块
export default [
    {
        path: '/login', 
        name: 'login',
        component:() => import('@/views/system/login'),
        meta:{fullScreen:true}
    },
    {
        path:'/register',
        name:'register',
        component:() => import('@/views/system/register'),
        meta:{requireAuth:true,fullScreen:true}
    },

export default [
    {
        path:'/rescue',
        name:'rescue',
        component:() => import('@/views/pages/rescue'),
        meta:{homePages:true}
    }
]

　　然后我们再看下路由导航守卫，加上homePages：如果路由元信息里面requireAuth为true，或者homePages为true，都不拦截

router.beforeEach((to, from ,next) => {
    const token = store.getters.userInfo
    if(to.matched.some(record => record.meta.requireAuth || record.meta.homePages)){
        next()
    }else{
        if(token){
            next()
        }else{
            if(to.path==="/login"){
                next()
            }else{
                next({path:'/login'})
            }
        }
    }
    return
})

10、elementUI的默认提示框样式修改

　　今天用element ui ，做了个消息提示，发现提示的位置总是在上面

　　可是我想让提示的位置到下面来，该怎么办？

　　最后还是看了官方的api

　　原来有个自定义样式属性 customClass 设置下就好了