nuxt使用笔记

173 阅读2分钟

1.流程image-20210312203207252

来了一个请求(url跳转请求) 先进入nuxtserverinit钩子 这时候可以改变store

然后走路由之前一定会走中间件

middware 可以校验权限 然后走到页面后会进行数据校验和发送请求

asyncData 发送请求 fetch主要是给store填充状态 //区别

然后又进行跳转的话又会走路由前的中间件循环

render走完再去走vue客户端的生命周期 注意created是服务端和客户端都有的 所以不能执行window操作 vue的生命周期会在render后执行

2.目录

1.pages里面路由自动生成 自动生成路由在 .nuxt下的router.js

2.布局文件layouts

3.middlewares 是路由走之前的经过的

4.server 自己写koa代码做node后台

5.static不打包 assets会打包

6.nuxt.config是配置信息

7..nuxt里面不用改 因为每次运行自动生成的

3.路由

嵌套路由

image-20210312205428085

image-20210312205915996

必须有detail文件夹和detail.vue文件且里面有nuxt-child才有嵌套的路由自动生成

nuxt-child类似router-view 里面内容就是detail文件夹里面的内容

动态路由

创建_id.vue即可 子文件通过

$route.params.id 来获取id参数

4.路由导航跳转

nuxt-link 相当于router-link进行跳转·

image-20210312210247075

一般首页都会把登录和详情页的js全部加载 如果不想 则加上no-prefetch则我们点对应路由时候在下载

5.nuxt.config.js

1.可以配置router 一般可以不配

官网 www.nuxtjs.cn/api/configu…

image-20210312211037533

对routes就行修改 把pages里面othername 改成我们的login

login生效 othername路由也有效 所以最好是不写在pages里面的组件 或者我们在这个配置把othername这个路由删掉

image-20210312212231974

最后再走这个路由 没匹配的全部路径到就是404

6.视图

image-20210312211508193

这八个属性都是写在export defult 对象里面的东西(比原始vue多的) 针对当前组件的

asyncData,fetch都是获取异步数据

asyncData 发送请求 fetch主要是给store填充状态 //区别

head 重新定义页面中的head东西 是函数返回对应的head配置

官网:www.nuxtjs.cn/guide/views

image-20210312212314742

asyncData异步数据

image-20210312213314875

axios

image-20210312212751612

中间件

走路由前都是走中间件

类似koa的中间件 导出都是函数

image-20210312213759362

全局配置 在nuxt.config.js的router里面的

image-20210312214216961

单独给某个页面(路由)设置中间件

image-20210312214104682

store

image-20210312214725043

这是store下user.js代码

直接一个文件直接给store进行模块化

以后通过store.user.token访问