序言

忍不住骂一口，SHIT！这两天应老师要求把之前的 vue 项目用 nuxt 构建 ssr 渲染，在途中遇到一个不合理使用 router 的小问题居然折腾了我一天时间，白白浪费复习时间，不然我都复习完高数了(╬▔ 皿 ▔)凸

nuxt 中的 router

由于 nuxt 已经帮我们把 router 做了底层封装，它会在运行时检测指定文件夹下的目录结构和文件名，自动为我们配置 router，因此我们只需要按照官方规范命名的目录结构放置文件即可，今天所说的问题也是因为在这种配置产生。

params 问题描述

原项目中使用了 params 作为路由参数进行传递，但由于页面属于左侧分页列表+右侧内容显示,如下。例如我们切换到第 2 页并点击第一个标题后，页面重新渲染，左侧分页列表切换回初始状态。

params 使用注意

在 nuxt 中，我们可以很轻松甚至不用额外声明的使用 params 来进行参数传递，这是极为方便的，但是 params 同时也充当路径的一部分。比如我们将比较 “/active” 和 “/active/1”，在不使用 nuxt 的情况下我们可以把它看成"/active"简单的携带了一个值为 1 的参数，有它无它并不会影响页面状态的变化，但是在使用了 nuxt 后，这个 params 既会被当成可传递的值也会被认为是需要跳转到"/active"的子路由，即跳转一个新的页面状态，因此当 params 的值发生改变时，nuxt 会帮助我们对页面会重新进行渲染，这一操作就会使得某些不需要做持久化存储的值在页面状态更新时丢失。

总结

与 params 对应的 query 显然更适合于在 nuxt 处理局部状态的问题，params 和 query 的使用情景可以简单的概括为：params 适用于全局状态的变化，query 适用于局部状态的转换。

在 nuxt 中使用 params 与原生的 vue 上是略有不同的，原生 vue 的组件之间都是独立的、模块化的，页面创作自由度高，params 只是简单的被当作一个路由参数。而 nuxt 更像一个以路由为中心的 vue 集大成者（路由驱动模式），params 多担当了路由跳转的作用，路由之间的微妙变化会引起整个页面的状态发生变化。