vue3 动态添加路由 router.addRoute() 时遇到的问题

在 vue-router@4 版本中取消了 router.addRoutes() 方法，改用 router.addRoute() 方法，来动态添加路由。空白页问题为什么会出现空白页？那是因为在路由跳转的时候，路由可能还没有被加载，此时就会出现进入到空白页。所以需要通过 next({...to, replace: true}) 来进行一个重定向，将当前路由替换成新的路由。但是，这种方式仅限于常量路由中没有全局404页面，如果常量路由中有全局404页面，那么在路由加载的时候，就会跳转到404页面。如下：const constantRoutes = [ { path: '/', name: 'Home', component: () => import('@/views/Home.vue'), }, { path: '/login', name: 'Login', component: () => import('@/views/Login.vue'),

技术 · 2024-11-30

vue3实现对textarea组件光标聚焦

在写个人小demo时需要使用到一种效果就是一开始为 input 框，当用户点击时变化为 textarea 并光标能够进行聚焦。通过 ref 来获取 textarea 组件，并使用 focus() 事件来对文本框进行光标的聚焦。<template> <NInput v-model:value="desc" v-if="!isFocusDesc" @focus="handleFocusDesc"/> <NInput v-model:value="desc" type="textarea" v-else ref="textarea" @blur="isFocusDesc = false"/> </template> <script setup> import {ref, nextTick} from 'vue' import {NInput} from 'naive-ui' let d

技术 · 2024-02-20
2023 - 2025 a博客-个人博客-技术分享. All Rights Reserved.
Theme Jasmine by Kent Liao