【Vue】router-link :to跨域跳转新链接，不带localhost:80端口

router-link ：to

<template> <div class=“background” style=“font-family:kaiti”> <div class=“login-container”> <div class=“login-box”> <div class=“blur-box”> <h2 style=“text-align: center; font-size: 26px; color: black;margin-bottom: 20px;margin-top: -10px;”>欢迎登录</h2> <el-form status-icon ref=“formRef” :rules=“data.rules” :model=“data.form” style=“margin-bottom: 20px;”> <div class=“input-group”> <el-form-item prop=“username”> <el-input v-model=“data.form.username” prefix-icon=“User” placeholder=“请输入账号” clearable /> </el-form-item> </div> <div class=“input-group” style=“margin-top: 10px;”> <el-form-item prop=“password”> <el-input v-model=“data.form.password” prefix-icon=“Lock” placeholder=“请输入密码” show-password clearable /> </el-form-item> </div> <div class=“role-select”> <div v-for=“role in roles” :key=“role.value” class=“role-item” :class=“{ active: data.form.role === role.value }” @click=“data.form.role = role.value” > <div class=“radio-dot”></div> {{ role.label }} </div> </div> <el-button @click=“login” type=“primary” class=“login-btn”>登 录</el-button> <div style=“text-align: right; margin-top: 15px;”> 还没有账号? <a class=“register-link” href=“/register”>立即注册</a> </div> </el-form> </div> </div> </div> </div> </template> <script setup> import { reactive, ref } from ‘vue’ import { User, Lock } from ‘@element-plus/icons-vue’ import { ElMessage } from ‘element-plus’ import request from ‘@/utils/request’ import axios from ‘axios’ const roles = [ { label: ‘管理员’, value: ‘ADMIN’ }, { label: ‘教师’, value: ‘TEACHER’ }, { label: ‘学生’, value: ‘STUDENT’ } ] const data = reactive({ form: { role: ‘ADMIN’, username: ‘’, password: ‘’ }, rules: { username: [{ required: true, message: ‘请输入账号’, trigger: ‘blur’ }], password: [{ required: true, message: ‘请输入密码’, trigger: ‘blur’ }] } }) const formRef = ref() const login = () => { formRef.value.validate(async (valid) => { if (!valid) return try { const res = await request.post('/login', data.form) if (res.code === '200') { localStorage.setItem('xm-pro-user', JSON.stringify({ ...res.data, token: res.data.token // 确保token字段存在 })) ElMessage.success('登录成功') // 添加路由跳转容错处理 setTimeout(() => { if (res.data.role === 'ADMIN') { window.location.href = '/' } else { window.location.href = '/front/home' } }, 500) } } catch (error) { ElMessage.error(res.msg) } }) } </script> <!-- 统一导航逻辑 --> <nav class=“main-nav” v-if=“showNavigation”> <template v-if=“!data.user”> <router-link to=“/front/home” class=“nav-item”>首页</router-link> <router-link to=“/courses” class=“nav-item”>视频课程</router-link> <router-link to=“/live” class=“nav-item”>直播课程</router-link> </template> <!-- 未登录状态显示登录/注册 --> <div class=“user-actions” v-else> <router-link to=“/login” class=“auth-link”>登录</router-link> <span class=“divider”>|</span> <router-link to=“/register” class=“auth-link”>注册</router-link> </div>为什么点击登录的时候页面一点反应都没有,也登录不成功,浏览器报错POST http://localhost:8080/login net::ERR_FAILEDUncaught (in promise) ReferenceError: res is not defined