Vue3经验总结

1、router.push、router.replace、router.go区别

router.push:

向history栈添加一个新的纪录，点击后退会返回至上一个页面，push方法其实和<router-link :to="{name: "Findpwd"}">是等同的

router.replace：

替换history栈中最后一个记录，不会向 history 添加新纪录

router.go(n)：

router.go(1) // 类似history.forward()、router.go(-1) // 类似history.back()

el-link href="/findpwd"：会使整个页面刷新，不建议使用

2、shit+enter阻止默认换行

#shift+回车有默认换行 不需要就禁止
@keydown.shift.enter.prevent
#ctrl+回车 内容换行
@keyup.ctrl.enter.prevent="lineBreak"
#回车发送消息 
exact 让回车事件只能单独触发，防止和其他组合按键回车触发发送消息 
prevent 阻止默认的换行事件
@keydown.enter.exact.prevent="send"

let message = ref("");
let textInput = ref();
 
// 换行
function lineBreak() {
  console.log("换行");
  const textarea = textInput.value.textarea; //获取输入框元素
  const start = textarea.selectionStart;
  const end = textarea.selectionEnd;
  const value = textarea.value;
  const newValue = value.substring(0, start) + "\n" + value.substring(end);
  textarea.value = newValue;
  textarea.selectionStart = textarea.selectionEnd = start + 1;
}
// 发送
function send() {
console.log("发送");
}

3、发布的dist到Spring Boot3目录/static/admin下运行

// 第一步：
// vite.config.js下配置base目录
export default ({ mode }) =>
  defineConfig({
    // 部署到Spring Boot的admin目录下时必须要设置二级目录:VITE_BASE = '/admin'
    base: loadEnv(mode, process.cwd()).VITE_BASE,

// 第二步：    
// 路由器对象采用带#号的Hash模式，这样VUE的URL路径才不会当作spring boot controller路径报错
const router = createRouter({
  // history: createWebHistory(),
  history: createWebHashHistory(),
  routes,
});