Vue开发路上遇到的问题记录与解决办法

Vue开发路上遇到的问题记录与解决办法

1. linkActiveClass: "active"
vue-router配置路由设置linkActiveClass，用来为激活态的路由跳转添加“active”类
路由配置如下：

const routes = [
  { path: "/", redirect: "/company" },
  { path: "/company", component: Home },
  { path: "/job", component: Job },
  { path: "/require", component: Require },
  {
    path: "/joinus", component: Joinus, children: [
      { path: "/joinus/login", component: Login },
      { path: "/joinus/signup", component: Signup },
    ]
  },
  { path: "*", redirect: "/" }
]
const router = new VueRouter({
  mode: 'history',
  linkActiveClass: 'active',
  routes,
})

使用过程（css样式码未上传）：
before：

<div class="navbar">
      <router-link to="/" class="navitem">   //问题产生的地方，to属性跳转的位置
        公司简介
        <i class="line"></i>
      </router-link>
      <router-link to="/job" class="navitem">
        职位介绍
        <i class="line"></i>
      </router-link>
      <router-link to="/require" class="navitem">
        职能需求
        <i class="line"></i>
      </router-link>
      <router-link to="/joinus" class="navitem">
        加入我们
        <i class="line"></i>
      </router-link>
    </div>

不良的效果（图1）

after:

<div class="navbar">
      <router-link to="/company" class="navitem">   //改变to跳转的url
        公司简介
        <i class="line"></i>
      </router-link>
      <router-link to="/job" class="navitem">
        职位介绍
        <i class="line"></i>
      </router-link>
      <router-link to="/require" class="navitem">
        职能需求
        <i class="line"></i>
      </router-link>
      <router-link to="/joinus" class="navitem">
        加入我们
        <i class="line"></i>
      </router-link>
    </div>

期待的效果（图2）

问题分析： before时，vue模板编译后“公司简介”总为active态， 是因为路由配置中对任意url都重定向为/，而“公司简介”跳转目标就是/，因此总是active态；after后，“公司简介”跳转目标是/company,因此在点击时才变为acitve态

2. node后台接收不到axios发来的数据

/*******before********/
getInfo() {
      let datium = this.sendData;
      this.axios
        .post("http://localhost:5000/back", datium)
        .then(res => {
          this.backInfo = res.data;
        });
    }

---

/******after********/
getInfo() {
      let datium = this.sendData;
      this.axios
        .post("http://localhost:5000/back", datium, {
        //增加headers参数
          headers: { "Content-Type": "application/x-www-form-urlencoded" }
        })
        .then(res => {
          this.backInfo = res.data;
        });
    }

问题分析： post请求必须将请求头的"Content-Type"设置成"application/x-www-form-urlencoded"，否后后端接收到的将是空数据

3. v-for循环之<label>与<input>

/*********before************/
<input type="file" name="file" @change="changeFile">
      <button v-if="file" @click="uploadFile">上传文件</button>
      <ul v-if="uploadedFiles">
        <li v-for="(file, index) in uploadedFiles" :key="index">
          <label for="chosenFile">
            <input type="checkbox" id="chosenFile">
            <span>{{file}}</span>
          </label>
          <button @click="downloadFile(index)">下载文件</button>
        </li>
      </ul>

出现的问题：v-for循环遍历出的<label>包裹的checkbox受到不同<span>{{file}}</span>的影响，不能分别作用于指定的位置

/*********after***********/
<input type="file" name="file" @change="changeFile">
      <button v-if="file" @click="uploadFile">上传文件</button>
      <ul v-if="uploadedFiles">
        <li v-for="(file, index) in uploadedFiles" :key="index">
          <label :for="index">   //for值绑定循环索引index
            <input type="checkbox" :id="index">     //id值绑定循环索引index
            <span>{{file}}</span>
          </label>
          <button @click="downloadFile(index)">下载文件</button>
        </li>
      </ul>

改进：易于阅读与维护

问题分析： v-for有模板复用机制