nuxt页面跳转_Nuxt.js 遇到的问题

Nuxt.js 主要是 Vuejs SSR 后端渲染一个开箱就可以食用的实现，想要有更高的自由度可以去参考：Vue.js 服务器端渲染指南。如果仅仅只是为了解决 SEO 的问题，贸然采用 Vuejs SSR 显然不是一个好的选择。

CSS 模块化

Nuxtjs 在任意 .vue 文件中引入 CSS 文件，即便是在不同的 layout 中引入，都会变成全局样式，个人的解决方法有两种：

1. 加入顶部 class

.app {

header {

height: 100px;

}

}

.admin {

header {

background: #eee

}

}

2. CSS Module

开启 CSS Module 只需要在 nuxt.config.js 加入：

cssModules: {

modules: true

}

UI 库

引入 UI 库，只能在 nuxt.config.js 中的 plugins 字段中加入，并且还需注意第三方库是否支持 SSR。以 Element-UI 为例:

首先需要在 plugins 文件夹下添加文件 element-ui.js。

import Vue from 'vue'

import ElementUI from 'element-ui'

Vue.use(ElementUI)

然后在 nuxt.config.js 中添加设置，是否开启 SSR 取决于第三方库。

plugins: [

{

src: '~/plugins/element-ui',

ssr: true

}

]

Nuxt 数据拉取

数据拉取可以使用 asyncData 和 fetch，两者差别在于 asyncData 可以更新 data，fetch 无法更新 data。fetch 最好是和全局状态一起使用。

全局状态管理

Nuxt 已经集成了 Vuex，在 store 文件夹中添加相应的文件就可以使用。如果需要预加载数据，只能在 store/index.js 中通过 nuxtServerInit 来实现，其他 store 文件里面调用 nuxtServerInit 是无效的。nuxtServerInit 执行时间比 middleware 要早，如果想预加载数据或者用户权限判断，最好是在 nuxtServerInit 处理完相应的数据。

export const actions = {

async nuxtServerInit ({ dispatch }) {

}

}

新页面滚动条

新页面切换时，如 /page?page=1 这样的页面，由于共用了相同的 vue 文件，跳转新页面时候，滚动条会保持在相同的位置，解决方式是修改 layouts 中 nuxt 组件的 key。

/* /layouts/default.vue */