在vue3中创建多重布局的方法

这篇具有很好参考价值的文章主要介绍了在vue3中创建多重布局的方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在vue3中创建多重布局的方法

在本文中,会通过demo演示来讲解几个用于创建多重布局的方式。

demo需求:创建一个带有主页、营销页面和应用程序页面的 Web 应用程序

1. 导入Layouts作为常规组件来创建布局系

这是创建布局最简单的方法,但灵活性较差。

创建一个layouts文件夹,在其中创建 3 个包含slot的布局组件。

在vue3中创建多重布局的方法,vue3,javascript,前端,vue
在vue3中创建多重布局的方法,vue3,javascript,前端,vue
然后,只需在每个页面组件中导入所需的布局,如下所示:

在vue3中创建多重布局的方法,vue3,javascript,前端,vue
该方法有两个主要问题:

  1. 需要导入每个页面的布局
    当然,可以使这些组件全局化,但仍然需要每次手动包装内容。

  2. 每次路由改变时,布局都会被卸载并销毁,即使下一个路由使用相同的布局

这对性能影响很小,但真正的问题是,即使它们使用相同的布局,我们也无法保留从一条路由到另一条路由的状态。

2.使用Vue Router、路由的meta属性和动态组件创建布局

为了避免在每个页面中导入布局,我们可以在路由器中导入一次,并为每个路由提供关联的布局。meta 元属性介绍

在vue3中创建多重布局的方法,vue3,javascript,前端,vue
如此处所示,我们将每个布局组件对象直接与每个路由的元属性相关联。我们只导入一次所有布局。

为了避免布局被卸载和破坏,我们会将布局放在页面上方而不是页面内。

在vue3中创建多重布局的方法,vue3,javascript,前端,vue
为了将布局放在页面上方,我们在 App.vue 组件中创建了一个动态组件

在模板中,我们可以通过$routepath来访问当前路由。我们可以访问它的元属性,这意味着我们可以访问之前设置的布局组件对象。

如果路由在元对象上没有布局属性,我们会回退到字符串使用 div 标签。

只导入一次布局,我们不需要导入甚至包装每个页面中的布局,现在,我们不会有性能问题,并且我们可以在从具有相同布局的 2 个路由导航时保持状态。

所以主页组件现在看起来像这样:

在vue3中创建多重布局的方法,vue3,javascript,前端,vue
不再需要通过slot插入任何东西;所有内容都在 App.vue 中围绕 <router-view> 进行处理,<router-view> 代表路由更改时的每个页面。

此方法适用于大多数用例,但有 1 个问题:

仅当path改变时布局才会改变。

如果需要动态改变布局而不改变path,这个方法就行不通了。

虽然只有少数情况下我们希望动态更改布局,但这种情况可能会存在,比如:

  • 可能是在一段时间后显示锁定的页面
  • 可能是显示离线页面
  • 可能是显示错误页面

这些示例可以通过全屏弹窗来实现,但是弹窗很容易通过控制台从 DOM 中删除。

3.使用ShallowRef、Provide、Inj​​ect和Vue Router的afterEach钩子创建布局

为了能够从任何地方更改布局,而不仅仅是在path更改时,我们需要在整个应用程序中共享布局的状态。

我们可以使用VuexPina来实现这一点,但为了能简单的展示,本文使用 Vue 的原生响应式系统和组合 API

步骤如下:

  1. App.vue中,我们将创建一个布局常量,其中包含一个shallowRef来保存当前布局组件

  2. 在一个单独的文件中,我们将创建一个带有键/值对的对象,其中包含每个布局的名称及其组件。
    在vue3中创建多重布局的方法,vue3,javascript,前端,vue

  3. App.vue 或其他地方,我们将使用路由的 afterEach 钩子监听每个路由变化,以动态更改当前布局

  4. App.vue 中,我们将向其后代提供 布局常量,以便 App.vue 树中的任何组件都可以注入 布局常量来更改其值。

  5. 在路由中,我们将元属性上的每个布局属性更改为仅包含要选择的布局名称的字符串。
    将路由中的元更改为仅字符串,因为它们将映射到第2步中的对象:
    在vue3中创建多重布局的方法,vue3,javascript,前端,vue

现在让我们将所有代码整理一下:

在vue3中创建多重布局的方法,vue3,javascript,前端,vue
为什么我们使用shallowRef而不是ref

ref 将使基值和所有嵌套值变为响应式,但 shallowRef 只会使基值变为响应式。

由于我们存储的是一个组件,它是一个具有大量嵌套值的复杂对象,因此使用 ref 会导致性能问题。

其实也没有必要纠结使用是否要使用ref,因为我们只需要知道整个组件何时更改,而不是嵌套值何时更改。

下面是一个可以通过单击更改其布局的主页示例:

在vue3中创建多重布局的方法,vue3,javascript,前端,vue
如上面的代码所示,我们现在可以注入和访问布局的状态并将其更改为我们想要的任何组件。由于是响应式的,它将动态更改 App.vue 中的组件。

对于大多数场景来说,可以使用 VuexPinia 执行相同的操作来实现共享状态。文章来源地址https://www.toymoban.com/news/detail-661376.html

到了这里,关于在vue3中创建多重布局的方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3拖拽布局+动态组件+自适应布局

    1.拖拽布局插件 Vue Grid Layout -️ 适用Vue.js的栅格布局系统 可拖动和可调整大小栅格布局的Vue组件。 https://jbaysolutions.github.io/vue-grid-layout/zh/ //在package.json中dependencies下添加下面插件库,并执行命令npm install  \\\"vue-grid-layout\\\": \\\"^3.0.0-beta1\\\",  2.拖拽页面代码 3.图表子组件代码

    2024年02月11日
    浏览(41)
  • vue3前端模拟https安全策略同局域网内测试方法-local-ssl-proxy

    直接在cmd跑即可,不过我们应该先运行项目 为什么要用https安全策略呢,因为http浏览器策略访问权限有限,不能使用navigator的激活“用户音频或视频”的方法,所以必须要用https安全策略 这里我们用的npm中local-ssl-proxy包 local-ssl-proxy on GitHub 或者以下简写方式 解释 改一下hos

    2024年02月16日
    浏览(38)
  • 壁纸小程序Vue3(首页布局)

    App.vue中引用 style lang=\\\"scss\\\"     /*每个页面公共css */   @import \\\'common/style/common-style.scss\\\';       /style   创建公共标题组件common-title 将元素的 display 属性设置为 inline-block 可以让元素既有行内元素可以一行显示多个的特性,又有块级元素可以设置宽高的特性。    common-title ind

    2024年04月08日
    浏览(31)
  • Vue3学习(二十一)- 文档管理页面布局修改

    按照国际惯例,要先聊下生活,吐槽一番,今天是2月14日,也是下午听老妈说,我才知道! 现在真的是对日期节日已经毫无概念可言,只知道星期几。 现在已经觉得写博客也好,学习文章也罢,和写日记一样,已经融入到我的生活中,或者更确切的说,变成生活的一部分了

    2024年03月09日
    浏览(52)
  • Vue3使用 xx UI解决布局高度自适应

    在相应的Sider部分添加:height: ‘91.8vh’,即可。示例: vw、vh、vmin、vmax是一种视窗单位,也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗(Viewport)大小来决定的,单位1,代表类似于 1%。 视窗(Viewport)是你的浏览器实际显示内容的区域—,换句话说是你的

    2024年02月04日
    浏览(41)
  • 记录--Vue3基于Grid布局简单实现一个瀑布流组件

    在学习Grid布局之时,我发现其是CSS中的一种强大的布局方案,它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局,在刷某书和某宝首页时,我们发现其展示方式就是一种瀑布流,是一种流行的网站页面布局,视觉表现为参差不齐的多栏布局,随着页

    2024年02月05日
    浏览(61)
  • vue3 座位选座,矩阵布局,可点击选中拖拽调换位置

    由于公司项目需求需要做一个线上设置考场相关的座位布局用于给学生考机排号考试,实现教室考场座位布局的矩阵布局,可点击选中标记是否有座无座拖拽调换位置横向纵向排列,这块的逻辑与ui网上很少有参考的价值,作者把这块逻辑实现了供大家参考 提示:使用vue3+ts实现,其

    2024年02月08日
    浏览(45)
  • 前端开发:Vue3提示警告Failed to resolve component:XXX If this is a native custom element… 的解决方法

    在前端开发中使用Vue的开发者都知道,Vue目前已经以Vue3.0为基础版本了,也就是说Vue3.0已经成为主流版本了。还在只用Vue2.0开发没有使用Vue3.0的开发者要注意了,要抓紧时间熟悉和了解Vue3以上的相关语法和知识点了,迫在眉急。本篇博文来分享一下,关于在使用Vue3的时候遇

    2024年02月11日
    浏览(45)
  • vue3.0+element Plus实现页面布局,侧边栏菜单路由跳转

    一. 先在router.js文件中配置路由,将侧边栏中需要跳转的页面都添加到children中 二. 在view目录下新建一个文件,里面包含侧边栏要跳转的页面 三.  页面样式布局 1. 我选择使用自定义组件BaseLayout.vue文件来设置header和aside样式显示 也可以使用element plus中的Container 布局容器 

    2024年02月13日
    浏览(49)
  • Vue3 入门笔记 ---- 利用Element Plus对页面进行布局划分以及实现左侧公共菜单

    这个系列的笔记重点会放在怎么样利用Vue3把项目架设起来并跟后端API互动,不会介绍Vue的基础特性,关于Vue的基础特性可以参考这个视频四个小时带你快速入门Vue,我是看这个入门的,觉得还不错。 代码地址: https://github.com/yexia553/vue_study/tree/%E9%85%8D%E7%BD%AEvue-router/vue3-note

    2024年02月04日
    浏览(64)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包