1.流程
来了一个请求(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.路由
嵌套路由
必须有detail文件夹和detail.vue文件且里面有nuxt-child才有嵌套的路由自动生成
nuxt-child类似router-view 里面内容就是detail文件夹里面的内容
动态路由
创建_id.vue即可 子文件通过
$route.params.id 来获取id参数
4.路由导航跳转
nuxt-link 相当于router-link进行跳转·
一般首页都会把登录和详情页的js全部加载 如果不想 则加上no-prefetch则我们点对应路由时候在下载
5.nuxt.config.js
1.可以配置router 一般可以不配
对routes就行修改 把pages里面othername 改成我们的login
login生效 othername路由也有效 所以最好是不写在pages里面的组件 或者我们在这个配置把othername这个路由删掉
最后再走这个路由 没匹配的全部路径到就是404
6.视图
这八个属性都是写在export defult 对象里面的东西(比原始vue多的) 针对当前组件的
asyncData,fetch都是获取异步数据
asyncData 发送请求 fetch主要是给store填充状态 //区别
head 重新定义页面中的head东西 是函数返回对应的head配置
asyncData异步数据
axios
中间件
走路由前都是走中间件
类似koa的中间件 导出都是函数
全局配置 在nuxt.config.js的router里面的
单独给某个页面(路由)设置中间件
store
这是store下user.js代码
直接一个文件直接给store进行模块化
以后通过store.user.token访问