.page-enter-active, .page-leave-active { transition: opacity .3s } .page-enter, .page-leave-active { opacity: 0 } .bounce-enter-active { animation: bounce-in .8s; } .bounce-leave-active { animation: bounce-out .5s; } @keyframes bounce-in { 0% { transform: scale(1) } 50% { transform: scale(1.01) } 100% { transform: scale(1) } } @keyframes bounce-out { 0% { transform: scale(1) } 50% { transform: scale(1.01) } 100% { transform: scale(1) } }
路由参数如何传递？
同Vue-router，有声明式和编程式两种方式，无非是标签变成了 router.push(...)
nuxt-link :to="{name:'article',params:{id:1234}}" >声明式</nuxt-link> // 编程式 this.$router.push({ name:'article', params:{ id:1234 } })
动态路由如何进行参数检验？
Nuxt.js提供了一个validate的生命周期钩子，可以在此进行参数的校验。以文章详情校验id为例，我们需要判断传入的id是否是数字，可以像下面这样处理。
validate({ params }) { return /^\d+$/.test(params.id) }
如何添加404等错误页面？
可以在layout下新建一个error.vue页面，内容如下，当访问一个不存在的页面的时候，或者参数检验失败的时候，或者我们在middleware中间件处理抛出异常的时候，都会跳转到该页面。
<template> <div> <h1 v-if="error.statusCode === 404">页面不存在</h1> <h1 v-else>应用发生错误异常</h1> <nuxt-link to="https://www.jb51.net/">首 页</nuxt-link> </div> </template> <script> export default { props: ['error'], layout: 'blog' // 指定模板页面 } </script>
middleware中的文件抛出错误
export default function({ store, error, redirect }) { if (!store.state.user.userInfo.auth) { error({ message: '没有权限哦！', statusCode: 403 }) } }
顶部进度条如何设置？
loading 属性配置 可以在nuxt-config.js设置loading的颜色，使用了this. loading可能无法在created里立即使用。此种配置loading有严重的缺陷，无法知道真正的加载进度。也可以自定义加载组件，loading: '~components/loading.vue'。
export default { mounted () { this.$nextTick(() => { this.$nuxt.$loading.start() setTimeout(() => this.$nuxt.$loading.finish(), 500) }) } }
异步数据如何获取？
Nuxt.js提供了两个函数，asyncData和fetch函数。asyncData 获取组件的数据，fetch 在渲染页面之前获取数据填充应用的状态树（store）。
asyncData可以使用promise也可以使用async函数，记住，此时返回的东西需要用一个对象进行包裹，不能挂载到data里，此时没有this对象。
// 方式一 asyncData({ app,params,route,query,error}) { return getUserlist({}).then(res => { let user = []; user = res.list console.log(user,'user') return {user} }) .catch(err => { console.log(err) }) }, // 方式二 async asyncData({ app }) { let data = await getUserlist({}); let user = data.list; return { user } }
fetch函数同上，可以使用promise也可以使用async函数，通常会commit一个mutation。
export default { fetch ({ store, params }) { return axios.get('http://my-api/stars') .then((res) => { store.commit('setStars', res.data) }) } } </script> // 或者使用 async 或 await 的模式简化代码如下： <template> <h1>Stars: {{ $store.state.stars }}</h1> </template> <script> export default { async fetch ({ store, params }) { let { data } = await axios.get('http://my-api/stars') store.commit('setStars', data) } } </script>
如何动态修改title的内容？
如果是写死的，可以直接修改head的配置。
head() { return { // title: '',这里一旦声明，在asyncdata里修改也不起作用,直接以这个为准 meta: [ { hid: 'description', // nuxt.config 替换唯一标识 hid { hid: 'description', name: 'description', content: 'Nuxt.js project' } name: 'content', content: '文章详情' } ] } },
如果是动态数据从数据源里获取，然后通过asynData里的app对象，动态修改head的title。
asyncData({ app, params }) { const id = params.id; return getArticleDetail({ id }) .then(result => { app.head.title = result.title; }) .catch(err => {}) }
如何进行权限JWT验证？
登录成功以后，我们会在cookie和Vuex中缓存token信息，当界面刷新的时候，会走store里的nuxtServerInit 函数，该函数仅在每个服务器端渲染中运，可以使用req.headers.cookie获取浏览器的cookie，再次更新store里的值，接着会走到中间件，中间件进行验证，如果有token信息则继续，没有则跳转到登录页。
1. 为什么要在nuxtServerInit更新store的值？
需要在middleware里使用，否则刷新后store里的值为空了。
2. 客户端调用接口可以拿到token，服务器端如何拿到？
可以通过nuxtServerInit里的req拿到请求信息的cookie,然后请求接口。
3. 前后端分离，刷新的时候如何保证用户名、token等信息依然存在？
可以像上面一样，每次取cookie的值再次更新store，但这样有一个问题，cookie可能会被篡改，后端代码需要做验证。也可以每次刷新重新通过token请求接口，更新用户信息。
store代码