外汇网站建设公司,青岛代理注册公司电话,设计一个营销方案,企业文化范文新建页面
Nuxt项目中的页面是在 pages目录 下创建的
在pages目录创建的页面#xff0c;Nuxt会根据该页面的目录结构和其文件名来自动生成对应的路由。页面路由也称为文件系统路由器#xff08;file system router#xff09;#xff0c;路由是Nuxt的核心功能之一
方式一…新建页面
Nuxt项目中的页面是在 pages目录 下创建的
在pages目录创建的页面Nuxt会根据该页面的目录结构和其文件名来自动生成对应的路由。页面路由也称为文件系统路由器file system router路由是Nuxt的核心功能之一
方式一手动创建(文件与文件夹方式均可以) 方式二命令行创建 npx nuxi add page home # 创建home页面单文件 npx nuxi add page detail/[id] # 创建detail页面文件夹 npx nuxi add page user-[role]/[id] # 创建user页面
内置组件
Nuxt3 框架也提供一些内置的组件常用的如下
SEO组件 Html、Body、Head、Title、Meta、Style、Link、NoScript、BaseNuxtWelcome欢迎页面组件该组件是 nuxt/ui的一部分NuxtLayout是 Nuxt 自带的页面布局组件NuxtPage是 Nuxt 自带的页面占位组件 需要显示位于目录中的顶级或嵌套页面 pages/是对 router-view 的封装 ClientOnly该组件中的默认插槽的内容只在客户端渲染 而fallback插槽的内容只在服务器端渲染 NuxtLink是 Nuxt 自带的页面导航组件 是 Vue Router组件 和 HTMLa标签的封装。 等等
assets
资源目录
Nuxt使用两个目录来处理像stylesheets, fonts 或 images这样的资产。
public/目录内容原样提供给服务器根目录。assets/目录按惯例包含你想要构建工具(Vite或webpack)处理的每个资产。
public
用作静态资产的公共服务器可在应用程序上直接通过 URL 直接访问比如引用public/img/ 目录中的图像文件 在静态 URL 中可用 /img/nuxt.png如下图静态的URL也支持在背景中使用
templateimg src/img/nuxt.png/
/templateassets
assets经常用于存放如样式表、字体或 SVG的资产可以使用 ~/assets/ 路径引用位于assets目录中的资产文件~/assets/ 路径也支持在背景中使用
templateimg src~/assets/img/nuxt.png/
/template全局css样式
手动导入
style scoped langscss
/* 1.手动导入全局样式 */
/* import ~/assets/styles/variables.scss; */// as vb: 给这个模块起一个命名空间
// as * : 可以省略命名空间
// use 和 import
/* use ~/assets/styles/variables.scss as bv; */
/* use ~/assets/styles/variables.scss as *; */.local-style {/* color: vb.$fsColor; */color: $fsColor;font-size: $fs20;include border();
}
/stylenuxt.config配置
css:您可以定义要全局设置的CSS文件/模块/库包含在每个页面中。 Nuxt将根据其扩展名自动猜测文件类型并使用适当的预处理器。如果需要使用它们您仍然需要安装所需的加载器。 vite: 要在Nuxt组件样式中全局插入语句可以使用nuxt.config 文件中的Vite选项。
export default defineNuxtConfig({css: [/assets/styles/main.css,/assets/styles/global.scss,/assets/cus-font/iconfont.css, // 自定字体图标],vite: {css: {preprocessorOptions: {scss: {// 自动的给 scss 模块首行添加额外的数据:use /assets/styles/variables.scss as *;additionalData: use /assets/styles/variables.scss as *;,},},},},
});
字体图标
将字体图标存放在assets目录下字体文件可以使用 ~/assets/ 路径引用。在nuxt.config配置文件中导入全局样式在页面中就可以使用字体图标了
// assets/cus-font/iconfont.css
font-face {font-family: iconfont; /* Project id */src: url(~/assets/cus-font/iconfont.ttf) format(truetype);
}export default defineNuxtConfig({css: [/assets/cus-font/iconfont.css, // 自定字体图标],
});
路由
组件导航NuxtLink
NuxtLink是Nuxt内置组件是对 RouterLink 的封装用来实现页面的导航。 该组件底层是一个标签因此使用 a href 属性也支持路由导航但是用a标签导航会有触发浏览器默认刷新事件而 NuxtLink 不会NuxtLink还扩展了其它的属性和功能当NuxtLink进入客户端的视口时Nuxt将自动提前预取链接页面的组件和有效载荷(生成的页面)从而实现更快的导航。 应用Hydration后已激活可交互页面导航会通过前端路由来实现。这可以防止整页刷新,并允许动画过渡。当然手动输入URL后点击刷新浏览器也可导航这会导致整个页面刷新NuxtLink 组件属性 to支持路由路径、路由对象、URLhrefto的别名activeClass激活链接的类名target和a标签的target一样指定何种方式显示新页面等等
NuxtLink to/index/NuxtLink
NuxtLink to/homehome/NuxtLink编程导航navigateTo
navigateTo 函数在服务器端和客户端都可用也可以在插件、中间件中使用也可以直接调用以执行页面导航例如
当用户触发该goToProfile()方法时我们通过navigateTo函数来实现动态导航。建议 goToProfile方法总是返回 navigateTo 函数该函数不需要导入或 返回异步函数
navigateTo( to , options) 函数:
to: 可以是纯字符串 或 外部URL 或 路由对象options: 导航配置可选 replace默认为false为true时会替换当前路由页面external默认为false不允许导航到外部连接true则允许等等
function goToCategory() {return navigateTo(/category);
}
function gotoCategory2() {return navigateTo({path: /category,query: {id: 200,},},{replace: true, // 是否是替换当前的页面});
}
function gotoCategory2() {return navigateTo(https://www.jd.com, {external: true,});
}编程导航useRouter
Nuxt3z中的编程导航除了可以通过 navigateTo 来实现导航同时也支持 useRouter ( 或 Options API 的 this.$router ) useRouter常用的API
back页面返回和 一样 router.go(-1)forward页面前进同 router.go(1)go页面返回或前进如 router.go(-1) or router.go(1)push以编程方式导航到新页面。建议改用 navigateTo 。支持性更好replace以编程方式导航到新页面但会替换当前路由。建议改用 navigateTo 。支持性更好beforeEach路由守卫钩子每次导航前执行用于全局监听afterEach路由守卫钩子每次导航后执行用于全局监听…
// useRouter
let router useRouter();
function goToCart() {router.push(/cart); // navigateTo
}
function goBack() {router.go(-1);
}// 路由的守卫
router.beforeEach((to, form) {console.log(to);console.log(form);
});动态路由
Nuxt3 和 Vue一样也是支持动态路由的只不过在Nuxt3中动态路由也是根据目录结构和文件的名称自动生成 动态路由语法
页面组件目录 或 页面组件文件都 支持 [ ] 方括号语法方括号里编写动态路由的参数
例如
pages/detail/[id].vue - /detail/:idpages/detail/user-[id].vue - /detail/user-:idpages/detail/[role]/[id].vue - /detail/:role/:idpages/detail-[role]/[id].vue - /detail-:role/:id
动态路由 和 index.vue 能同时存在 Next.js也可以 如果有类型报错 删除.nuxt文件
npm run postinstall路由参数
动态路由参数
通过 [] 方括号语法定义动态路由比如/detail/[id].vue页面跳转时在URL路径中传递动态路由参数比如/detail/10010目标页面通过 route.params 获取动态路由参数
查询字符串参数
页面跳转时通过查询字符串方式传递参数比如/detail/10010?nameliujun目标页面通过 route.query 获取查询字符串参数
script langts setup
// 拿到动态路由的参数
const route useRoute();
const { id } route.params;
const { name } route.query;
/script404页面
捕获所有不配路由即 404 not found 页面
通过在方括号内添加三个点 如[…slug].vue 语法其中slug可以是其它字符串。除了支持在 pages根目录下创建也支持在其子目录中创建。在pages根目录下创建匹配所有404页面在子目录下创建仅匹配当前路由后的比如 在pages/detail/[…slug].vue 仅匹配 /detail/{没有的页面}
路由匹配规则
预定义路由优先于动态路由动态路由优先于捕获所有路由。请看以下示例
预定义路由pages/detail/create.vue 将匹配 /detail/create 动态路由pages/detail/[id].vue 将匹配/detail/1, /detail/abc 等。但不匹配 /detail/create 、/detail/1/1、/detail/ 等 捕获所有路由pages/detail/[…slug].vue 将匹配 /detail/1/2, /detail/a/b/c 等。但不匹配 /detail 等
嵌套路由
Nuxt 和 Vue一样也是支持嵌套路由的只不过在Nuxt中嵌套路由也是根据目录结构和文件的名称自动生成。 编写嵌套路由步骤
创建一个一级路由如parent.vue创建一个与一级路由同名同级的文件夹如 parent在parent文件夹下创建一个嵌套的二级路由 如parent/child.vue 则为一个二级路由页面如 parent/index.vue 则为二级路由默认的页面 需要在parent.vue中添加 NuxtPage 路由占位
