1、问题分析

问题报错：

2.问题原因：

userRouter是vue3的钩子函数(组合式API)，不能直接用在组件外部或非setup函数内部。

3.问题解决:

方法1：
Login_bak0.ts文件代码

import {
    
     reactive,defineComponent} from "vue";
import {
    
     useRouter } from "vue-router";
interface LoginEmp {
    
    
    username?: string
    password?: string
}
export default defineComponent({
    
    
    setup(){
    
    
        let loginForm = reactive<LoginEmp>({
    
    })
        const router = useRouter();
        function toLogin() {
    
    
            router.push('/')
        }
        return{
    
    
            loginForm,
            toLogin
        }
    }
})

需要引入文件的vue代码不变 也就是还是下面

<script lang="ts">
   import login from './Login_bak0'
   export default login
</script>
<template>
  <div id="container">
    <div class="login-form">
      <el-form label-width="80px">
        <p class="title">xxxx系统</p>
        <el-form-item label="用户名" prop="username">
          <el-input
            v-model="loginForm.username"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input
            type="password"
            v-model="loginForm.password"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button class="button" type="primary" @click="toLogin"
            >登 录</el-button
          >
          <el-button class="button" type="info" @click="">重 置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<style scoped>
#container {
      
      
  padding: 10%;
  height: 410px;
  background-image: url('../../assets/bg1.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}

.login-form {
      
      
  max-width: 400px;
  padding: 30px;
  margin: 0 auto;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  background-color: white;
}

.title {
      
      
  font-size: 30px;
  font-family: '楷体';
  text-align: center;
  margin-bottom: 30px;
  font-weight: bold;
}

.button {
      
      
  margin-top: 30px;
  width: 120px;
}
</style>

方法2：
Login_bak0.ts文件代码如下

import {
    
     reactive,defineComponent} from "vue";
import router from "@/router/index"; /* 存放路由的文件 */
interface LoginEmp {
    
    
    username?: string
    password?: string
}
export default defineComponent({
    
    
    setup(){
    
    
        let loginForm = reactive<LoginEmp>({
    
    })
        function toLogin() {
    
    
            router.push('/')
        }
        return{
    
    
            loginForm,
            toLogin
        }
    }
})

另:路由的文件index.ts如下:

import {
    
     createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
    
    
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
    
    
      path: '/login',
      name: 'login',
      component: () => import('@/views/login/Login.vue')
    }
  ],
})

export default router

需要引入文件的vue代码不变 。