![](https://img-blog.csdnimg.cn/e2a9e5725943415eb68ee6377a6bb5ed.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
vue3全家桶
文章平均质量分 83
vue3全家桶的学习记录以及开发问题分享
生活、追梦者
别怕过去的自己,如何生活的狼狈不堪;只有现在勇往直前的力量,才足以战胜遥不可及的梦想。路,一直在脚下,好好努力,明日必定越来越好。
展开
-
【vuejs】vue-router多层级路由配置以及页面嵌套的处理
在Vue2和vue-router中,自定义滚动行为是一个重要的特性,它允许开发者控制页面跳转时滚动条的移动。这对于增强用户体验至关重要,尤其是在多层级页面嵌套的情况下。滚动恢复:在多层级页面中,用户可能会离开当前页面去浏览其他部分,当他们返回时,页面应该滚动到他们离开时的位置。Vue-router允许通过函数来实现这一功能。滚动到指定位置:开发者可以通过函数让页面在跳转后滚动到指定的位置,例如,总是滚动到页面顶部或者页面的某个特定元素。滚动行为的实现:通过设置router实例的。原创 2024-07-07 20:15:00 · 1464 阅读 · 2 评论 -
【vuejs】vue-router 路由跳转参数传递详解和应用场景及技巧
路由定义是Vue Router中实现页面路由跳转的基础。在Vue2中,路由的定义通常在应用的入口文件或路由配置文件中进行。路由定义涉及到路径模式(path)、视图组件(component)以及一些高级配置,如命名视图、重定向、别名等。- 路由模式:路由的路径模式定义了URL的路径与组件的映射关系。例如,`{ path: '/user/:id', component: User }` 表示当URL匹配到 `/user/:id` 时,将渲染 `User` 组件,其中 `:id` 是一个动态参数。- 组件映原创 2024-07-03 21:45:00 · 1156 阅读 · 1 评论 -
【vuejs】vue-router 之 addRoute 动态路由的应用总结
Vue Router 是 Vue.js 官方的路由管理器,用于构建单页面应用。它与 Vue.js 深度集成,让开发者能够轻松地构建具有复杂用户界面的单页面应用。Vue Router 允许你定义不同的路由,并通过 组件在应用中显示匹配的组件。Vue Router 的核心特性包括:Vue Router 的安装和基本使用步骤如下:对于 Vue 2,推荐使用 Vue Router 3.x 版本。可以通过 npm 或 yarn 进行安装:1.2 项目中引入 Vue Router在项目的入口文件(如 main.j原创 2024-07-02 20:30:00 · 1593 阅读 · 0 评论 -
【vuejs】组件中 data 函数的作用和分析
使用函数定义data,Vue还提供了额外的优势。例如,可以在data函数内部访问this关键字,这意味着可以基于组件的属性或其它状态来初始化data对象。此外,函数返回的对象可以包含方法,这些方法可以用于操作数据,使得状态管理更加集中和一致。这种方法提高了组件设计的灵活性和可维护性。组件中data定义为函数是Vue框架设计的核心决策之一,它确保了组件的复用性和数据隔离。通过这种方式,每个组件实例都能拥有一个独立的状态,避免了不同实例间数据的相互影响。原创 2024-06-03 14:34:42 · 1004 阅读 · 1 评论 -
实时动态修改css :root 中的变量实现换肤、主题色的功能
到此就完成了动态修改:root变量实现换肤了,具体的应用场景中我们应该是在页面上操作,选中需要的肤色然后修改:root定义的变量值,考虑到浏览器刷新会重置原始状态的值,这里要结合本地存储方式记住选中的肤色。原创 2024-04-12 16:18:22 · 701 阅读 · 1 评论 -
【Vue I18n 国际化插件】vue3+vue-i18n 项目实战总结
前端国际化:应用要服务于不同的地区的用户,所以应用不能单一语言;应用要能让不同地区的人无障碍使用就需要实现国际化。目前在各大商城项目中,对于国际化语言的需求越来越高了,其中最多的就是 vue 项目使用 i18n 插件实现多语言切换功能。原创 2024-04-08 11:31:16 · 3444 阅读 · 2 评论 -
浏览器默认样式重置以及normalize.css的使用
html,body {/* 文字风格 Sans-serif 各笔画粗细相同,Serif 笔画粗细不同,monospace 等宽体,cursive草书,fantasy梦幻 */Arial, '黑体', '宋体', Arial;body {#app {/* 重置各标签的默认样式 */a,body,center,cite,code,dd,del,div,dl,dt,em,fieldset,figure,footer,form,h1,h2,h3,原创 2024-04-08 11:28:58 · 894 阅读 · 0 评论 -
vue3 状态管理之 Pinia 的选项式(options API)和组合式 API 的使用方式
与 Vue 的选项式 API 类似,我们也可以传入一个带有 state、actions 与 getters 属性的 Option 对象,与 Vue 的选项式 API 类似,我们也可以传入一个带有 state、actions 与 getters 属性的 Option 对象count: 0,}),getters: {},},actions: {},},})在组件中的使用// vite.config.ts 自动导入 Vue 相关函数原创 2024-04-07 14:53:10 · 2305 阅读 · 0 评论