关于前端:快速上手Vue-Router和组合式API创建灵活可定制的布局

5次阅读

共计 2666 个字符，预计需要花费 7 分钟才能阅读完成。

微信搜寻【大迁世界】, 我会第一工夫和你分享前端行业趋势，学习路径等等。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

快来收费体验 ChatGpt plus 版本的，咱们出的钱
体验地址:https://chat.waixingyun.cn/#/home
能够退出网站底部技术群，一起找 bug.

该教程从根底开始，介绍了 Vue Router 的概念，如何配置路由以及如何应用组合式 API。它还介绍了如何在 Vue Router 中应用组合式 API 来创立布局。教程还包含如何应用路由钩子函数和路由元信息来管制布局。

Vue Router 是在 Vue.js 单页应用程序中创立路由的事实标准。然而，你是否晓得，除了应用它将路由映射到页面组件之外，还能够应用它来组合页面布局？这是一个乏味的倡议。让咱们看看如何实现。

假如咱们正在构建一个博客，在该博客中，某些页面可能在次要内容的两侧都有侧边栏：

其余页面只须要在内容旁边搁置一个侧边栏，而且主内容前后的地位能够变动。

而其余页面则基本不须要侧边栏。

咱们该如何实现这个工作？选项 1 是为侧边栏创立组件，并依据须要在每个页面中蕴含它们。例如，AboutShow.vue 将取得一个相似于以下内容的路由记录：

// router/index.js
{
    path: '/about',
    component: () => import('../pages/AboutShow.vue')
},

而相应的页面组件可能是这样的：

// *AboutShow.vue
<template>
    <div class="flex ...">
        <SidebarOne />
        <main>....</main> 
        <SidebarTwo />
    </div>
</template>

<script setup>
    import SidebarOne from "@/components/SidebarOne"
    import SidebarTwo from "@/components/SidebarTwo"
</script>*

无论如何，对于页面始终会与侧边栏相耦合。在大多数状况下，这可能并不是什么大问题。然而，让咱们思考一种代替办法，即在路由器级别而不是页面级别组成布局。

为了实现这一点，咱们将为路由记录提供 components（复数）选项，而不是 component（复数）选项:

{
  path: '/about',
  components: {default: () => import('@/pages/AboutShow.vue'),
    LeftSidebar: () => import('@/components/SidebarOne.vue'),
    RightSidebar: () => import('@/components/SidebarTwo.vue'),
  },
},

在这里，咱们定义了对于路由应该包含一个默认组件，即对于页面。这就是将显示在 RouterView 组件中。然而，它还应该包含一个 LeftSidebar 组件，该组件映射到 SidebarOne，以及一个 RightSidebar 组件，该组件映射到 SidebarTwo。

当初，为了让 LeftSidebar 和 RightSidebar 组件晓得在哪里显示，咱们必须应用额定的路由器视图，称为 命名视图，以及咱们的默认路由器视图。咱们还能够将路由器视图包装在带有一些 Tailwind 类的 div 中，以便好看地布局。

<!-- App.vue -->
<template>
<!--...-->
<div class="sm:flex container p-5 mx-auto content justify-betweenflex-wrap">
    <RouterView class="view main-content w-full order-2"></RouterView>
    <RouterView name="LeftSidebar" class="view order-1 w-full"></RouterView>
    <RouterView name="RightSidebar" class="view order-3 w-full"></RouterView>
</div>
<!--...-->
</template>

请留神，新的路由器视图具备与咱们提供给路由记录的组件属性的键相匹配的名称属性（LeftSidebar 和 RightSidebar）

最初，这一次页面自身能够齐全排除侧边栏，后果是一样的。

// *AboutShow.vue
<template>
    <div>
        <main>....</main> 
    </div>
</template>

这可能看起来有点绕，但当初很酷的是，有了这些额定的命名视图，咱们能够在任何新的路由记录上灵便地增加一个或两个侧边栏。

{
  path: '/posts/:id',
  components: {default: () => import('@/pages/PostShow.vue'),
    RightSidebar: () => import('@/components/SidebarTwo.vue'),
  },
},

//router/index.js
{
    path: '/posts/:id',
    components: {default: () => import('@/pages/PostShow.vue'),
        LeftSidebar: () => import('@/components/SidebarOne.vue'),
},

//router/index.js
{
    path: '/posts/',
    components: {default: () => import('@/pages/PostIndex.vue'),
        RightSidebar: () => import('@/components/SidebarOne.vue'),
},

~ 完

代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

原文：https://vueschool.io/articles/vuejs-tutorials/composing-layou…