Vue.js 报错 'Cannot read properties of undefined (reading 'use')' 以及路由跳转问题解决方案

根据报错信息，错误出现在index.js文件的第12行，即在读取'use'属性时出现了undefined的情况。可能的原因是在Vue.use(VueRouter)之前没有正确导入VueRouter模块。

正确的index.js代码如下：

import Vue from 'vue';
import VueRouter from 'vue-router';
import { createRouter, createWebHistory } from 'vue-router'

// 导入组件
import RegisterForm from '../views/RegisterForm.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/registerForm',
    name: 'RegisterForm',
    component: RegisterForm
  }
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});

export default router;

至于App.vue中注册按钮没有显示超链接并且点击无法进行路由跳转的问题，可能是因为路由链接的路径应该以斜杠开头，所以需要将<router-link to='registerForm'>注册</router-link>修改为<router-link to='/registerForm'>注册</router-link>。修改后的App.vue代码如下：

<template>
  <div>
    <label>用户名:</label>
    <input type='text' v-model='username' placeholder='请输入用户名'>
    <br>
    <label>密码:</label>
    <input type='password' v-model='password' placeholder='请输入密码'>
    <br>
    <button @click='login'>登录</button>
    <br>
    <router-link to='/registerForm'>注册</router-link>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    login() {
      axios.post('/api/login', {
        username: this.username,
        password: this.password
      })
      .then(() => {
        alert('登录成功！');
      })
      .catch(() => {
        alert('登录失败，请检查用户名和密码！');
      });
    }
  }
};
</script>

<style>
label {
  display: block;
  margin-bottom: 10px;
}
</style>

这样修改后，注册按钮应该显示为超链接，并且点击后能够正确进行路由跳转。