分享下如何在Vue项目中进行网页布局

布局是减少代码重复并创建易于维护和专业外观的应用程序的重要模式。如果您正在使用Nuxt，它提供了一个优雅的解决方案。但不幸的是，在Vue中，官方文档根本没有提到它们。这经常导致对于应该在多个应用程序中相似的问题而言，采用次优和不太正规的解决方案。

经过多次尝试，我总结出了一种既有效又无需烦恼地扩展的布局方式。让我用一个小的示例演示一下。

要求

首先，让我们确定一些我们的布局结构需要满足的规则：

• 每个页面都应该声明布局和各个部分的组件

• 对一个页面的更改不应影响其他页面

• 如果页面布局的某些部分在多个页面中是相同的，应该只声明一次

设置Vue Router

我们需要在页面之间进行导航，这就是为什么我们要设置vue-router。 Vue-cli 和 vite 脚手架在创建新项目时提供了包含它的选项，但如果你不是从头开始，以下是安装它的步骤。

安装 vue-router 依赖

npm i -D vue-router@4

声明路由

const routes = [
  { path: "/", component: () => import("./pages/HomePage.vue") },
  { path: "/explore", component: () => import("./pages/ExplorePage.vue") },
];

导入项目

import { createApp } from "vue";
import { createRouter, createWebHashHistory } from "vue-router";
import App from "./App.vue";
import routes from "./routes.ts"

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

const app = createApp(App);

app.use(router);

app.mount("#app");

最后，更新App.vue文件，只包含一个 router-view 标签。

<template>
  <router-view />
</template>

我们现在可以在两个页面之间导航了，但这并不令人兴奋，因为它们目前是空的。让我们改变这种情况。