代码生成，实现学生信息添加、编辑页面的显示。修改程序，将原事件触发、模态框显示的学生信息新增、修改页面，改为通过动态路由（传递学生ID作为参数）在Vue-viewer中显示。 [实验步骤] 1.编写学生信息编辑相关Vue页面，其中学生ID由路由参数获得，当前学生信息由通过学生ID请求（或筛选）获得。 2.在src/router/index.js中配置路由。 3.分别以params和query两个方式传递学生ID参数。

以下是代码生成，实现学生信息添加、编辑页面的显示，并通过动态路由在Vue-viewer中显示的示例代码：

1. 编写学生信息编辑相关Vue页面

<template>
  <div>
    <h2>学生信息编辑</h2>
    <form>
      <div>
        <label for="name">姓名</label>
        <input type="text" id="name" v-model="student.name">
      </div>
      <div>
        <label for="age">年龄</label>
        <input type="number" id="age" v-model="student.age">
      </div>
      <div>
        <label for="gender">性别</label>
        <select id="gender" v-model="student.gender">
          <option value="male">男</option>
          <option value="female">女</option>
        </select>
      </div>
      <div>
        <button @click.prevent="saveStudent">保存</button>
      </div>
    </form>
    <div>
      <viewer :images="images" :visible="viewerVisible" @close="viewerVisible = false"></viewer>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import Viewer from 'v-viewer'

export default {
  data() {
    return {
      student: {
        name: '',
        age: '',
        gender: ''
      },
      viewerVisible: false,
      images: []
    }
  },
  mounted() {
    // 获取路由参数中的学生ID
    const studentId = this.$route.params.id
    // 发送请求获取当前学生信息
    axios.get(`/api/student/${studentId}`).then(res => {
      this.student = res.data
      this.images = [this.student.imgUrl]
    })
  },
  methods: {
    saveStudent() {
      // 发送POST请求保存学生信息
      axios.post('/api/student', this.student).then(res => {
        // 保存成功后跳转回学生列表页面
        this.$router.push('/student')
      })
    }
  },
  directives: {
    Viewer
  }
}
</script>

<style>
@import 'viewerjs/dist/viewer.css';
</style>

2. 在src/router/index.js中配置路由

import Vue from 'vue'
import VueRouter from 'vue-router'
import StudentList from '@/views/StudentList.vue'
import StudentEdit from '@/views/StudentEdit.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/student',
    component: StudentList
  },
  {
    path: '/student/:id',
    component: StudentEdit
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

3. 分别以params和query两个方式传递学生ID参数

在路由配置中，我们使用了动态路由的方式来传递学生ID参数。在组件中，我们通过this.$route.params.id来获取路由参数中的学生ID。如果你希望使用query参数来传递学生ID，可以将路由配置中的path改为'/student'，并将组件中的this.$route.params.id改为this.$route.query.id。

希望这些示例代码能对您有所帮助。