前端学习笔记-8.17.nuxt了解

本文介绍了Nuxt.js的路由配置,包括基础路由、动态路由、嵌套路由和动态嵌套路由。同时,详细讲解了asyncData方法在服务端和客户端获取数据的方式。此外,还探讨了中间件的使用,如何定义和调用中间件,以及它们在页面渲染前的作用。
摘要由CSDN通过智能技术生成

今天看了看Nuxt的官方文档。
我比较关心路由,asyncData(异步数据)

路由:
基础路由,动态路由,嵌套路由,动态嵌套路由
nuxt.js会依据pages项目结构自动生成路由,
[``](/api/components-nuxt-link):自定义路由

基础路由:
router: {
routers: [
{name: ‘index’,path: ‘/’,component:‘pages/index.vue’},
{name: ‘user’,path: ‘/user’,component:‘pages/user/index.vue’},
{name: ‘user-one’,path: ‘/user/one’,component:‘pages/user/one.vue’},
]
}

动态路由
在nuxt.js里面定义带参数的动态路由,需要创建对应的以下划线为前缀的vue
generate会忽略动态路由:API Configuration generate

嵌套路由
通过vue-router的子路由创建nuxt.js应用的嵌套路由
创建内嵌子路由,你需要添加一个vue文件,同时添加一个与改文件同名的目录用来存放子视图组件
别忘了在父组件(.vue文件)内增加<nuxt-child>用于显示子时图内容
router: {
routes: [
{
path: ‘/users’,
component:‘pages/users.vue’,
children:[
{
path: ‘’,
c

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值