简单路由功能实现后台拿数据渲染表格

1首先要在脚手架中下载路由依赖文件 和Axios依赖文件 在入口文件设置如图

2 查看路由index.js是否引入路由组件

3创建两个路由组件并在APP.vue引用

4登录页

<template>
  <div class="home">
    <div>
      <p>姓名: <input type="text" v-model="text" @keyup.enter="login" /></p>
      <p>
        密码: <input type="password" v-model="password" @keyup.enter="login" />
      </p>
      <button @click="login">登录</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      text: "",
      password: "",
    };
  },
  methods: {
    login() {
      if (this.text.trim() == "" || this.password.trim() == "") {
        alert("用户名或密码不能为空");
        return;
      }
      this.$axios
        .post("login", {
          username: this.text,
          password: this.password,
        })
        .then((data) => {
          alert(data.data.meta.msg);
          localStorage.token = data.data.data.token;
          localStorage.username = data.data.data.username;
          setTimeout(() => {
            this.$router.push("/about");
          }, 800);
        });
    },
  },
};
</script>

5表单页面

<template>
  <div class="about">
    <table border="1" style="margin-left: 40%">
      <h6>{{ han }}</h6>
      <tr>
        <th>是否付款</th>
        <th>个人/商家</th>
        <th>数量</th>
        <th>编号</th>
      </tr>
      <tr v-for="(item, index) in listarr" :key="index">
        <td>{{ item.is_send }}</td>
        <td>{{ item.order_fapiao_title }}</td>
        <td>{{ item.order_id }}</td>
        <td>{{ item.order_price }}</td>
      </tr>
    </table>
    <button @click="quit()">退出登录</button>
  </div>
</template>
<script>
export default {
  name: "About",
  data() {
    return {
      listarr: [],
    };
  },
  computed: {
    han() {
      return localStorage.username;
    },
  },
  created() {
    this.$axios({
      method: "get",
      url: "orders",
      headers: {
        Authorization: localStorage.token,
      },
      params: {
        pagenum: 1,
        pagesize: 5,
      },
    }).then((data) => {
      this.listarr = data.data.data.goods;
      console.log(this.listarr);
    });
  },
  methods: {
    quit() {
      localStorage.removeItem("token");
      localStorage.removeItem("username");
      this.$router.push("/");
    },
  },
};
</script>