qq_35032712的博客

Nuxt 3 中提供了一个路由中间件，它允许在路由跳转前或者路由跳转后执行一些代码，例如进行页面访问权限的验证、记录用户的访问记录等等。这个中间件可以理解为Vue Router 中的导航守卫(Navigation Guards)，同样有。如果中间件有多个，你也可以使用阵列来传入多个中间件，并且会依序执行这些路由中间件。就上以上第一个例子，用的就是具名的路由中间件，这里就不举例了。全局路由中间件，将会在每一次导航切换页面时执行。当我们要使用这个中间件时，可以在页面中使用。全局路由中间件，放置在。

的命名方式来定义一个动态路由。这个路由将会匹配到 http://localhost:3000/user/123，其中 123 是。除了根路径之外，你还可以在 pages/ 目录下创建其他文件来定义其他的路由。目录下创建了一个名为 index.vue 的文件，它定义了一个名为。动态路由可以让你使用参数来构建路由，这些参数可以在 URL 中使用。上一章讲页面的时候我们也提到了路由，现在我们来详细讲。并根据文件名从目录中创建的每个组件生成路由。在上面的示例中，我们将一个对象传递给。在上面的代码中，我们在。

在 Nuxt3 中，页面是指应用程序中的路由页面，这些页面可以被搜索引擎索引并直接通过 URL 访问。NuxtPage需要显示位于目录中的顶级或嵌套页面pages/。的路由，可以通过访问 http://localhost:3000/about 来访问。，就可以直接访问：http://localhost:3000/about 不会报错。例如，如果你想要创建一个名为 about 的页面，可以在。目录来存放我们的组件。Nuxt3 不需要引入组件，当然你引入也没有问题。目录中的顶层页面或嵌套页面。

然后，在浏览器中访问 http://localhost:3000/，您应该可以看到Nuxt3应用程序的默认欢迎页面。使用的 Vite，你可以使用 unplugin-vue-components 来进行按需加载。在nuxt.config.ts中引入。

模块内，你可以使用一些简化的语法来声明组件的 props、data、computed、methods 等内容，从而简化了组件的编写过程同时也提高了性能。从上述代码中可以看出，Composition API不再纠结于使用对象的形式来描述组件，而是把逻辑封装在函数中，在。函数替代Vue 2中的data，computed，methods等选项，提供更加灵活的组件逻辑组织方式。同时，Vue 3的数据响应也更加灵活，可以在嵌套的对象和数组中进行响应式。vue3中需要使用结构的形式进行操作，引入的是工厂函数。

在学习SSR之前，我们先来了解一下，什么是SPA。即单页面应用，一般也称为客户端渲染CSR（Client Side Render）。通俗点来说就是整个网站由一个HTML页面构成，所有的内容都是通过JavaScript动态加载和渲染的。用户在访问SPA站点时，页面只有第一次加载会进行资源请求，之后的操作都是通过AJAX异步请求获取数据并动态更新页面。

Nuxt 3 是一个基于Vue.js的静态网站生成框架，可以让开发者使用Vue.js构建出高性能、SEO友好、可扩展的Web应用程序。Nuxt 3相较于前代Nuxt 2，是全新的版本，重写了很多核心代码部分，并增加了新的功能。基于Vite的构建：Nuxt3使用了基于Vite的构建系统，这使得开发者可以获得更快的开发和构建速度。改进的路由系统：Nuxt3的路由系统得到了重大改进，它支持动态路由和嵌套路由，并提供了更好的路由配置选项。

在使用 Nuxt3 之前，需要安装 Node.js。并且nodejs版本要在16以上。如果没有安装nodejs的小伙伴，可以从官方网站https://nodejs.org/en/ 根据自己的平台选择下载长期稳定的Node.js版本，并按照安装向导完成安装过程。安装完成之后，我们可以通过检查nodejs版本来看是否正确安装nodejs检查是否正确安装了Node.js和npm，npx 是 Node.js 包管理工具 npm 5.2+ 版本中自带的一个命令行工具。如果正确安装了，它们将显示版本号。

通过本课程，您将会学习到Nuxt3的基础知识和/进阶开发的相关概念，编写和改进真实Nuxt3应用程序，并开发端到端的Vue.js应用，这个过程中，希望您能够发现您的兴趣并找到您的风格，成为一名更优秀的开发者。