前后端分离的web项目—前端实现页面跳转、渲染表格、携带参数的页面跳转

功能一：简单的页面间跳转

• 使用标签实现页面简单的页面跳转。

<router-link to="/register">
         <el-button >register</el-button>
    </router-link>

实现效果：

功能二：接受后端传来的数据并将其渲染出来

• 使用el-table组件渲染列表。
• 定义函数用来发送请求与接收返回数据。

<template>
    this is home page!
<!-- 在这里渲染列表，将表中的data赋成返回的categorys -->
 <el-table :data="categorys" stripe style="width: 100%">
    <el-table-column prop="catid" label="Catid" width="180" />
    <el-table-column  label="Name" width="180" >
        <template #default="scope">
            <el-button type="primary" @click="redirect(scope.row.catid)">{{scope.row.name}}</el-button>
        </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { ref } from '@vue/reactivity'
import axios from 'axios';
import { onMounted } from '@vue/runtime-core';
import router from '../router';
export default {
    name: "home",
    setup() {
        //定义一个变量用来接受后端穿来的categoryList
        const categorys = ref([])
        //编写一个getCategory函数，向后端发送异步请求，阻塞获取后端返回的值
        const getCategory = () => {
            return axios.get("/category/all").then(res => {
                // console.log(res.data.categoryList);
                //将res return
                return res;
            }).catch(e => {
                return e.res.data;
            })
        }
        //携带参数的页面跳转
        const redirect = (name) => {
            router.push({ path: "/category/"+name});
        }
        //在onMounted函数中，将后端传来的数据中的categoryList赋给categorys
        onMounted(async () => {
            const data = await getCategory();
            categorys.value = data.data.categoryList;
        })
        return {
            //将categorys返回给整个页面
            categorys,
            redirect
        }
    }
}
</script>

实现效果：

功能三：携带参数的页面跳转

• 在实现上一个功能的基础上，实现可以点击category name进行特定的跳转。
• 修改列表的组件结构，因为此处的跳转参数是在table里面的，所以需要修改列表的组件结构。

 <el-table :data="categorys" stripe style="width: 100%">
    <el-table-column prop="catid" label="Catid" width="180" />
    <el-table-column  label="Name" width="180" >
        <template #default="scope">
            <el-button type="primary" @click="redirect(scope.row.catid)">{{scope.row.name}}</el-button>
        </template>
    </el-table-column>
  </el-table>

• 编写redirect函数，将表格Name列每一行的值放在button中，当点击时执行redirect函数，将每一行的catid作为参数传递给redirect,并在redirect中实现携带参数的页面跳转。

  const redirect = (name) => {
            router.push({ path: "/category/"+name});
        }

那么怎么在页面中能根据传来的参数显示不同的数据呢？
首先要配置路由，也就是在index.js文件中进行修改。
在const routes{ }中配置参数：

 {
 //访问的路径中要有参数
    path: "/category/:category",
    //props属性要设为true
    props: true,
    component: () => import("../views/Category.vue"),
  },

实现效果：