router-link包裹的内容不显示，测试了应该是Manager中的代码有问题，但是不知道哪里出了问题

Question

<template>
  <div id="app">
    <!--编辑框-->
    <form class="form-horizontal">
      <div class="form-group ">
        <label for="inputText1" class="col-sm-2 control-label">编号：</label>
        <div class="col-xs-6">
          <input
            type="text"
            class="form-control"
            id="inputText1"
            v-model="id"
          />
        </div>
      </div>
      <div class="form-group">
        <label for="inputText2" class="col-sm-2 control-label">姓名：</label>
        <div class="col-xs-6">
          <input
            type="text"
            class="form-control"
            id="inputText2"
            v-model="name"
          />
        </div>
      </div>
      <div class="form-group">
        <label for="inputText3" class="col-sm-2 control-label">年龄：</label>
        <div class="col-xs-6">
          <input
            type="text"
            class="form-control"
            id="inputText3"
            v-model="age"
          />
        </div>
      </div>
      <button type="button" class="btn btn-primary" @click="add()">
        {{ str }}
      </button>
    </form>

    <table class="table table-bordered">
      <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>操作</th>
      </tr>
      <tr v-for="(list, index) in list" :key="index">
        <td>{{ list.id }}</td>
        <td>{{ list.name }}</td>
        <td>{{ list.age }}</td>
        <td>
          <button type="button" class="btn btn-info" @click="edit(index)">
            编辑</button
          >&nbsp;
          <button type="button" class="btn btn-danger" @click="del(index)">
            删除
          </button>
        </td>
      </tr>
    </table>
  </div>
</template>
<style>
* {
  margin: 0;
  padding: 0;
}

.table,
th {
  text-align: center;
}

.table {
  width: 40%;
  height: 200px;
  float: right;
  margin-top: 20vh;
  margin-right: 20%;
}

.form-horizontal {
  width: 30%;
  float: left;
  margin-top: 23vh;
  margin-left: 100px;
}

.form-horizontal button {
  margin-left: 320px;
}
</style>

<script>
export default {
  data() {
    return {
      index: -1,
      str: "添加",
      id: "",
      name: "",
      age: "",
      changeList: [],
      list: [
        { id: 1001, name: "猫", age: 3 },
        { id: 1002, name: "狗", age: 5 },
        { id: 1003, name: "猪", age: 1 }
      ]
    };
  },
  methods: {
    add() {
      if (this.str == "修改") {
        alert("功能未实现！");
      } else {
        //添加
        this.list.push({
          id: this.id,
          name: this.name,
          age: this.age
        });
        alert("添加成功！");
        //清空输入框
        this.name = "";
        this.id = "";
        this.age = "";
      }
    },
    del(index) {
      if (!confirm("确认删除吗？")) {
        return false;
      } else {
        this.list.splice(index, 1); //splice()删除数据
        alert("删除成功！");
      }
    },
    edit(index) {
      let changeList = this.list[index]; //需要修改的数据
      //将数据填充进表单
      this.id = changeList.id;
      this.name = changeList.name;
      this.age = changeList.age;
      this.str = "修改";
    }
  }
};
</script>
![图片说明](https://img-ask.csdn.net/upload/202009/20/1600607077_663248.png)![图片说明](https://img-ask.csdn.net/upload/202009/20/1600607088_517149.png)![图片说明](https://img-ask.csdn.net/upload/202009/20/1600607095_753036.png)![图片说明](https://img-ask.csdn.net/upload/202009/20/1600607103_111624.png)

Answer 1

代码中也没有Manager
从错误图看，还是vue路由的配置问题，好好检查下。