Nuxt3_1_路由+页面+组件+资源+样式 使用及实例

1、 简介

1.1 开发必备

  • node版本 v16.10.0 + 我使用的是16.14.0
  • 编辑器推荐使用Volar Extension 的VS code插件
  • Terminal 运行nuxt指令

1.2 环境搭建

  • 安装项目: npx nuxi@latest init [first_nuxt3]
  • 进入项目目录: cd [first_nuxt3]
  • 安装依赖:npm install
  • 启动项目: npm run dev – -o

至此,一个nuxt3项目已经被创建完成了,接下来就是在这个框架的基础上充实我们的内容。

2、路由、页面、组件

nuxt3约定式路由,不需要配置路由,在根目录pages下创建业务页面即可访问。
在这里插入图片描述

  • pages 用于编写业务组件,页面名称就是路由名称
  • components 组件文件夹,用于存放各类组件

访问 http://localhost:3000/about 展示about页面内容
访问 http://localhost:3000 展示index页面内容

2.1 简单页面

  • 为了能让我们编写的业务页面可以正常访问,首先要将app.vue中<NuxtWelcome />组件替换成<NuxtPage/>
  • 在pages/index.vue文件
<template><div>this is index page,Index pages has a components named hello<Hello /></div>
</template>
<script setup lang="ts">
import Hello from '../components/Hello.vue'
</script><style scoped>
</style>
  • 我们看到index.vue页面中引入了组件Hello,components/Hello.vue
<template><h1>Hello nuxt3</h1>
</template>

2.2 动态路由

Nuxt routing is based on vue-router and generates the routes from every component created in the pages/ directory, based on their filename.
nuxt路由基于vue-router,并根据pages/目录中创建的每个组件的文件名生成路由。
This file system routing uses naming conventions to create dynamic and nested routes:
这个文件系统路由使用命名约定来创建动态和嵌套路由:

  • 业务场景:用一个用户详情页面,但是不同的用户详情页结构相同,内容不同,大多数是以id进行区分,那么此时我们就可以以动态路由的形式来标记这个最新的页面

在这里插入图片描述

<template><div>这是 {{ id }} 号用户的详情</div>
</template>
<script setup>
const route = useRoute();
const id = route?.params?.id || 0
</script>

之后再页面访问 在这里插入图片描述
就可以看到我们想要的结果啦~

2.3 Navigation 导航

页面中的跳转,可以通过组件NuxtLink(无需引入)进行跳转,to跳转路径
在这里插入图片描述

<ul><li><NuxtLink to="/detail/1">用户1详情</NuxtLink></li><li><NuxtLink to="/detail/2">用户2详情</NuxtLink></li><li><NuxtLink to="/about">关于</NuxtLink></li>
</ul>

2.4 useRoute

在script setup中,我们可以通过useRoute方式获取当前页面的route信息,如query信息、params信息

例如:当我们访问 http://localhost:3000/detail/1?name=%E5%93%88%E5%B0%94%E6%BB%A8%E5%A4%A7%E7%8C%A9%E7%8C%A9页面信息时

detail页面获取路由相关信息并在页面上进行展示:

<template><div>这是 {{ id }} 号用户的详情名为 {{ name }}</div>
</template>
<script setup>
const route = useRoute();
const id = route?.params?.id || 0
const name = route?.query?.name || 'z'
</script>

最终展示效果:
在这里插入图片描述

2.5 Route Middleware 路由中间件

nuxt提供了一个可定制的路由中间件框架,您可以在整个应用程序中使用它,非常适合在导航到特定路由之前提取想要运行的代码。

有三种类型的路由中间件:

  • 匿名(或内联)路由中间件,直接在使用它们的页面中定义。
  • 命名路由中间件,放在middleware目录中,在页面上使用时将通过异步导入自动加载。(注意:路由中间件名称被标准化为kebab-case,所以someMiddleware变成了some-middleware。)
  • 全局路由中间件,它位于middleware目录中(后缀为. Global),将在每次路由更改时自动运行。

2.5.1 匿名(内联)路由中间件

2.5.2 命名路由中间件

使用示例:

  • 定义匿名中间件 middleware/auth.js
// 匿名 defineNuxtRouteMiddleware定义nuxt route 中间件
export default defineNuxtRouteMiddleware((to, from) => {console.log(to, from, '中间件跳转过程中to和from所代表的含义有何不同')if(!Number(to.params.id)) {return navigateTo('/login')} else if(Number(to.params.id) === 3) {return abortNavigation()}
})
  • 在对应业务页面中引入中间件auth
definePageMeta({middleware: ['auth'], // middleware: 'auth', 
})
  • 若跳转过程中不满足中间件所提供的条件,可以通过navigateTo跳转至指定页面,例如:login.vue
<template><div><div><span>账号:</span><input type="text"><span>密码:</span><input type="password"></div><button>登录</button></div>
</template>
  • navigateTo (to: RouteLocationRaw | undefined | null, options?: { replace: boolean, redirectCode: number, external: boolean) 可以根据对应options,重定向到指定路由,也可以直接调用来完成页面的跳转。

  • abortNavigation (err?: string | Error) 直接终止跳转,并可以返回一些错误信息

2.5.3 全局路由中间件

全局路由中间件无需刻意引入,只要在定义中间件的文件上加入global,即可在全局使用。

  • 定义全局路由中间件 middleware/auth.global.js
// 匿名 defineNuxtRouteMiddleware定义nuxt route 中间件
export default defineNuxtRouteMiddleware((to, from) => {if(to.fullPath.includes('detail') && !Number(to.params.id)) {return navigateTo('/login')} else if(Number(to.params.id) === 3) {return abortNavigation('Insufficient permissions.')} else {return true}
})
  • 在访问页面时即可看到对应效果

2.5.4 中间件的返回值

  • 无返回值:也就是说当前中间件不会阻塞路由跳转。
  • return navigateTo(‘/’) or return navigateTo({ path: ‘/’ }), 重定向到指定的路径,如何是在服务端的话,会设置 redirect code 为302
  • return navigateTo(‘/’, { redirectCode: 301 }), 重定向到指定的路径,如果直服务端的话,会设置 redirect code 为301 表示这个重定向的永久的。
  • return abortNavigation() 终止当前的跳转
  • return abortNavigation(error) 终止跳转并带有错误信息

2.5.6 动态添加中间件addRouteMiddleware

通过addRouteMiddleware()方法可以在代码中动态添加全局和命名路由中间件,例如可以在插件中

export default defineNuxtPlugin(() => {addRouteMiddleware('global-test', () => {console.log('this global middleware was added in a plugin and will be run on every route change')}, { global: true })addRouteMiddleware('named-test', () => {console.log('this named middleware was added in a plugin and would override any existing middleware of the same name')})
})
  • 匿名
export default defineNuxtPlugin(() => {addRouteMiddleware((to, from) => {if (to.path === '/forbidden') {return false}})
})
  • 具名
export default defineNuxtPlugin(() => {addRouteMiddleware('named-middleware', () => {console.log('named middleware added in Nuxt plugin')})
})
  • 全局
export default defineNuxtPlugin(() => {addRouteMiddleware('global-middleware', (to, from) => {console.log('global middleware that runs on every route change')},{ global: true })
})

2.6 Route Validation 路由验证

在您希望验证的每个页面中,通过definePageMeta中的validate属性提供路由验证。

validate属性接受路由作为参数。您可以返回一个布尔值,以确定这是否是要与该页一起呈现的有效路由。如果您返回false,并且找不到另一个匹配项,这将导致404错误。你也可以直接返回一个带有statusCode/statusMessage的对象,以立即响应一个错误(其他匹配将不被检查)。

<script setup>
definePageMeta({validate: async (route) => {return Boolean(Number(route.params.id))}
})
</script>

以上模拟业务场景为,详情员工的cid一定要为数字,其他情况下展示404

3. 资源(Assets)、CSS样式(Styling)

3.1 资源Assets

nuxt使用两个文件夹取处理像样式表、字体或图片资源

  • public: public目录内容按原样在服务器根目录下提供。
  • assets: assets目录包含了希望构建工具(Vite活Webpack)处理的所有资源。

3.1.1 Public

  • public目录用作静态资产的公共服务器,这些资产可在应用程序的定义URL中公开使用。
  • 你可以从应用程序的代码或通过根URL / 从浏览器获取public目录中的文件
<div><span>/+public+图片</span><img class="img_size" src="/public/publicImg.jpeg" alt="">
</div>
<div><span>/+图片</span><img class="img_size" src="/publicImg.jpeg" alt="">
</div>
<div><span>~+public+图片</span><img class="img_size" src="~/public/publicImg.jpeg" alt="">
</div>

3.1.2 Assets

  • nuxt使用Vite或webpack来构建和打包应用程序。这些构建工具的主要功能是处理JavaScript文件,但它们可以通过插件(用于Vite)或加载器(用于webpack)进行扩展,以处理其他类型的资产,如样式表、字体或SVG。此步骤转换原始文件主要是出于性能或缓存目的(例如样式表最小化或浏览器缓存失效)。
  • 在代码中,可以使用~/assets路径来引用位于assets目录的文件
<div><span>/+assets+图片</span><img class="img_size" src="/assets/assetsImg.png" alt="">
</div>
<div><span>~+assets+图片</span><img class="img_size" src="~/assets/assetsImg.png" alt="">
</div>

上述示例可见,
public文件可用方式: /public下的路径/public/public下的路径~/public/public下的路径
assets文件可用方式:/assets/assets下的路径~/assets/assets下的路径

3.1.3 public和assets的异同

相同点:

  • 文件夹中的资源在html中使用都是可以的

不同点:

  • 使用assets下面的资源,在js中使用的话,路径要经过webpack中的file-loader编译,路径不能直接写。
  • 使用public文件下面的资源,是不会被webpack处理的,它们会直接被复制到最终的打包目录下面,且必须使用绝对路径来引用这些文件。

注意:

  • public中的文件,是不会经过编译的,打包后会生成dist文件夹,public中的文件只是复制一遍。因此,public建议放一些外部第三方,自己的文件放在assets,别人的放public中
  • 若把图片放在assets和public中,html页面都可以使用,但是在动态绑定中,assets路径的图片会加载失败(因为webpack使用的是commonJS规范,必须使用require才可以)

3.2 全局样式引入(Global Styles Imports)

要在nuxt组件样式中全局插入语句,可以在nuxt.config文件中使用Vite选项。

3.2.1 使用sass/less

  • 安装sass npm install --save-dev sass node-sass sass-loader
  • 安装less npm install less less-loader@7.x --save-dev

3.2.2 定义全局样式文件

  • assets/css/global.scss
$primary: green;
$secondary: #E4A79D;.cursor-pointer {cursor: pointer;
}div {background-color: #E4A79D;
}span {color: $primary;
}* {box-sizing: border-box;-webkit-tap-highlight-color: transparent;-webkit-text-size-adjust: none;padding: 0;margin: 0;
}html,
body {margin: 0px;padding: 0px;height: 100%;width: 100%;box-sizing: border-box;color: #333;-webkit-text-size-adjust: 100% !important;-moz-text-size-adjust: 100% !important;text-size-adjust: 100% !important;
}
a {text-decoration: none;
}
input {border: none; //去除边框outline: none; //可以去除点击input时的border
}
@keyframes scaleBig {from {transform: scale(1);}to {transform: scale(1.05);}
}

3.2.3 在nuxt.config.ts中进行文件配置

有两种配置方式

  • 第一种,css数组配置全局文件
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({devtools: { enabled: true },css: ['@/assets/css/global.scss']
})

此时全局样式已被导入,直接在页面中即可使用

  • 第二种,vite下面配置css文件使用规则
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({devtools: { enabled: true },vite: {css: {preprocessorOptions: {scss: {additionalData: '@use "@/assets/css/global.scss" as *;'}}}}
})

此时,页面对应的style标签中,必须使用lang="scss"全局样式才会生效

如果有用,点个赞呗~

总结用法,希望可以帮助到你,
我是Ably,你无须超越谁,只要超越昨天的自己就好~

1、官方文档
2、中间件参考文章
3、资源参考文章
4、基础配置参考文章
5、Vite全局样式参考使用

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/45961.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Blazor前后端框架Known-V1.2.13

V1.2.13 Known是基于C#和Blazor开发的前后端分离快速开发框架&#xff0c;开箱即用&#xff0c;跨平台&#xff0c;一处代码&#xff0c;多处运行。 Gitee&#xff1a; https://gitee.com/known/KnownGithub&#xff1a;https://github.com/known/Known 概述 基于C#和Blazo…

探索Perfetto:开源性能追踪工具的未来之光

探索Perfetto&#xff1a;开源性能追踪工具的未来之光 1. 引言 A. 介绍Perfetto的背景和作用 随着移动应用、桌面软件和嵌入式系统的不断发展&#xff0c;软件性能优化变得愈发重要。在这个背景下&#xff0c;Perfetto作为一款开源性能追踪工具&#xff0c;日益引起了开发者…

BC108 矩阵交换

描述 KiKi有一个矩阵&#xff0c;他想知道经过k次行变换或列变换后得到的矩阵。请编程帮他解答。 输入描述 第一行包含两个整数n和m&#xff0c;表示一个矩阵包含n行m列&#xff0c;用空格分隔。 (1≤n≤10,1≤m≤10) 从2到n1行&#xff0c;每行输入m个整数&#xff08;范围-…

java云智慧工地管理平台系统源码

智慧工地将“互联网”的理念和技术引入建筑工地&#xff0c;从施工现场源头抓起&#xff0c;最大程度地收集人员、安全、环境、材料等关键业务数据&#xff0c;依托物联网、互联网&#xff0c;建立云端大数据管理平台&#xff0c;形成“端云大数据”的业务体系和新的管理模式&a…

【CSS动画02--卡片旋转3D】

CSS动画02--卡片旋转3D 介绍代码HTMLCSS css动画02--旋转卡片3D 介绍 当鼠标移动到中间的卡片上会有随着中间的Y轴进行360的旋转&#xff0c;以下是几张图片的介绍&#xff0c;上面是鄙人自己录得一个供大家参考的小视频&#x1f92d; 代码 HTML <!DOCTYPE html>…

BERT、ERNIE、Grover、XLNet、GPT、MASS、UniLM、ELECTRA、RoBERTa、T5、C4

BERT、ERNIE、Grover、XLNet、GPT、MASS、UniLM、ELECTRA、RoBERTa、T5、C4 ELMOBERTERNIE![在这里插入图片描述](https://img-blog.csdnimg.cn/274e31d0f8274c748d05abe2ec65fc73.png)GroverXLNetGPTMASSUniLMELECTRARoBERTaT5C4ELMO BERT

chatGPT-对话爱因斯坦

引言 阿尔伯特爱因斯坦&#xff08; 1879年 3 月 14 日 – 1955 年 4 月 18 日&#xff09;是一位出生于德国的理论物理学家&#xff0c;被广泛认为成为有史以来最伟大、最有影响力的科学家之一。他以发展相对论而闻名&#xff0c;他还对量子力学做出了重要贡献&#xff0c;因…

rfc7234之http缓存

缓存概念 缓存处理请求步骤 缓存如果查询到某个请求已经有缓存&#xff0c;那么需要进一步检查该资源的新鲜度&#xff0c;根据新鲜度和请求中的字段综合评估是否要去服务端拉取新鲜的资源。 注意&#xff1a; 创建响应时候要注意版本匹配&#xff0c;如果服务器响应和客户端…

漏洞指北-VulFocus靶场专栏-中级01

漏洞指北-VulFocus靶场专栏-中级01 中级001 &#x1f338;dcrcms 文件上传 &#xff08;CNVD-2020-27175)&#x1f338;step1&#xff1a;输入账号 密码burp suite 拦截 修改类型为 jpeg 中级002 &#x1f338;thinkphp3.2.x 代码执行&#x1f338;step1&#xff1a;burpsuite …

【ARM】Day6 cotex-A7核UART总线实验

cotex-A7核UART总线实验 1. 键盘输入一个字符‘a’&#xff0c;串口工具显示‘b’ 2. 键盘输入一个字符串"nihao"&#xff0c;串口工具显示“nihao” uart.h #ifndef __UART4_H__ #define __UART4_H__#include "stm32mp1xx_rcc.h" #include "stm3…

el-table实现纯前端查询列表(不走后端接口)

2023.8.16今天我学习了如何使用前端进行数据的查询&#xff0c;有时候后端会直接返回全部的数据&#xff0c;这时候我们就需要用前端进行查找数据。 首先elementUI有自带el-table查询的组件&#xff1a; Element - The worlds most popular Vue UI framework 我们发现在这段代…

Linux网络编程:网络基础

文章目录&#xff1a; 一&#xff1a;协议 二&#xff1a;网络应用设计模式_BS模式和CS模式 三&#xff1a;网络分层模型&#xff08;OSI七层 TCP/IP四层&#xff09; 四&#xff1a;通信过程 五&#xff1a;协议格式 1.数据包封装 2.以太网帧格式和ARP数据报格式 …

【Linux】Centos安装 mariadb 并授权远程登陆

&#x1f468;‍&#x1f393;博主简介 &#x1f3c5;云计算领域优质创作者   &#x1f3c5;华为云开发者社区专家博主   &#x1f3c5;阿里云开发者社区专家博主 &#x1f48a;交流社区&#xff1a;运维交流社区 欢迎大家的加入&#xff01; &#x1f40b; 希望大家多多支…

【云原生】Docker基本原理及镜像管理

目录 一、Docker概述 1.1 IT架构的演进&#xff1a; 1.2 Docker初始 1.3 容器的特点 1.4 Docker容器与虚拟机的区别 1.5 容器在内核中支持2种重要技术 1.6 Docker核心概念 1&#xff09;镜像 2&#xff09;容器 3&#xff09;仓库 二、安装Docker 2.1 Yum安装Docker…

三.net core 自动化发布到docker (创建一个dotnet工程发布)

创建Jenkins-create a job 输入名称&#xff08;建议不要带“”这类的字符&#xff09;&#xff0c;选择自由风格的类型&#xff08;红框标注的&#xff09;&#xff0c;点击确定 用于测试,下面选项基本没有选择-配置代码地址 选择执行shell #!/bin/bash # 获取短版本号 GITHA…

NLPR、SenseTime 和 NTU 加速自动视频纵向编辑

视频人像编辑技术已经在电视、视频和电影制作中得到了应用&#xff0c;并有望在不断发展的网真场景中发挥关键作用。最先进的方法已经可以逼真地将同源音频合成为视频。现在&#xff0c;来自北京模式识别国家实验室&#xff08;NLPR&#xff09;、商汤科技研究和南洋理工大学的…

OpenAI Function calling

开篇 原文出处 最近 OpenAI 在 6 月 13 号发布了新 feature&#xff0c;主要针对模型进行了优化&#xff0c;提供了 function calling 的功能&#xff0c;该 feature 对于很多集成 OpenAI 的应用来说绝对是一个“神器”。 Prompt 的演进 如果初看 OpenAI 官网对function ca…

CloudQuery实战 | 谁说没有一款一体化数据库操作管控云平台了?

文章目录 CloudQuery询盾的地址CloudQuery主页统一入口数据库归纳SQL编辑器权限管控审计中心数据保护数据变更 CloudQuery文档中心了解CloudQuery快速入门安装步骤社区版v2.1.0操作手册1数据查询更新日志 CloudQuery社区和活动 CloudQuery线上实战线上实战主页面展示及数据操作…

宝塔部署Java+Vue前后端分离项目经验总结

前言 之前部署服务器都是在Linux环境下自己一点一点安装软件&#xff0c;听说用宝塔傻瓜式部署更快&#xff0c;这次浅浅尝试了一把。 确实简单&#xff01; 1、 买服务器 咋买服务器略&#xff0c;记得服务器装系统就装 Cent OS 7系列即可&#xff0c;我装的7.6。 2、创建…

Linux面试笔试题(1)

1、以长格式列目录时&#xff0c;若文件test的权限描述为&#xff1a;drwxrw-r–&#xff0c;则文件test的类型及文件主的权限是__A____。 A.目录文件、读写执行 B.目录文件、读写 C.普通文件、读写 D.普通文件、读 在这个问题中&#xff0c;我们需要解析文件权限的描述&…