关键词：
【中文标题】Nuxt.js 嵌套路由加载问题【英文标题】：Nuxt.js nested route loading issue 【发布时间】：2021-01-02 03:11:36 【问题描述】：以上所有代码均来自我在 pages/apibuilder/models 文件夹中的文件 _id.vue
我用它来用数据填充我的商店
async asyncData( store )
// this.datas = await this.$axios
// .$get('/api/apibuilder/retrievemodel')
// .then(function (res)
// return res
// )
return datas: await store.dispatch('apibuilder/retrieve_model')
,
我在模板中以两种不同的方式使用这些数据
v-for 循环中的 1 个
<tr v-for="(data, name, index) in $store.state.apibuilder.currentModel.attributes":key="index">
2 我想显示这个 $store.state.apibuilder.currentModel.attributes 的编号 我是这样做的
<span> Object.keys($store.state.apibuilder.currentModel.attributes).lengthChamps</span>
如果我使用 nuxtlink 导航到我的嵌套页面：http://localhost:3000/apibuilder/models/Article 一切正常，我的循环和计数工作
但如果我尝试刷新页面或直接从 url 访问网站
我让循环工作，但不是计数 我有一个错误告诉我 $store.state.apibuilder.currentModel.attributes 为 null 并且它破坏了 object.keys().length
代码 1 和 2 在模板中非常接近，但它一次为 Null，并在几行后显示循环。
有什么想法吗？
ps，
我尝试在计算属性中进行计数，但它是相同的，当我重新加载页面时数据未定义。
我也尝试了 s-s-r = true 和 s-s-r = false
我也尝试过使用 fetch 而不是 asyncData
【问题讨论】：
【参考方案1】：我认为问题与 fetch 或 asyncData 无关。
您获取数据并将其存储在状态中。那挺好的。但在那之后，你不应该使用 store.state ：改用吸气剂（我发现使用 mapGetters 更干净）。
您的商店会很受欢迎：
export const state = () => (
apibuilder: ,
);
export const getters =
attributes(state)
return state.apibuilder.currentModel.attributes;
在你的组件中：
import mapGetters from 'vuex';
export default
computed:
...mapGetters(
attributes: 'attributes',
),
countAttributes()
if (this.attributes)
return Object.keys(this.attributes).length
多亏了它，它会对商店中数据的变化做出反应。
【讨论】：
Nuxt.js 中的无限动态级别嵌套
】Nuxt.js中的无限动态级别嵌套【英文标题】：InfinitedynamiclevelnestinginNuxt.js【发布时间】：2018-10-0118:02:31【问题描述】：我希望nuxt.js的路由完全动态，因为我无法预测用户和他对他想要的级别数量的偏好。所以一个用户会创建一... 查看详情
nuxt.js入门安装及灵活使用(代码片段)
...础路由3.3、动态路由3.4、动态命名路由3.5、默认路由3.6、嵌套路由3.7、过渡动效3.7.1全局过渡动效设置3.7.2、自定义动画4、视图4.1、默认模板4.2、默认布局4.2.1、布局概述4.2.2、布局分析4.2.3 查看详情
如何在 nuxt.js 中定义路由
】如何在nuxt.js中定义路由【英文标题】：Howtodefinerouteinnuxt.js【发布时间】：2019-04-2421:11:53【问题描述】：我有一个使用Nuxt.Js的博客网站，假设xyz.com并希望显示特定国家/地区代码的所有页面，例如xyz.com/en/home、xyz.com/en/about等。... 查看详情
Nuxt.js：无法生成路由
】Nuxt.js：无法生成路由【英文标题】：Nuxt.js:can\'tgenerateroutes【发布时间】：2021-03-1215:06:51【问题描述】：我想为我的项目生成静态路由（/contact、/about、...）和动态路由（/project/1、/project/2,...），这样当用户刷新页面时访问这... 查看详情
如何在 nuxt.js 中编写全局路由器功能
】如何在nuxt.js中编写全局路由器功能【英文标题】：howtowriteglobalrouter-functioninnuxt.js【发布时间】：2018-01-1213:11:55【问题描述】：我正在将Vue.js与Nuxt.js一起使用，但路由器的功能出现问题。在纯Vue中，我可以这样写main.js：valroute... 查看详情
如何管理来自 API 的大量路由及其与 Nuxt 路由器模块的组件关联
】如何管理来自API的大量路由及其与Nuxt路由器模块的组件关联【英文标题】：HowtomanagebunchofroutesfromAPIandtheircomponentassociationwithNuxtroutermodule【发布时间】：2020-10-0608:13:28【问题描述】：您好，亲爱的Nuxt/Vue/Node社区，我在我的Nuxt.j... 查看详情
Nuxt.js 中不同子域的不同路由
】Nuxt.js中不同子域的不同路由【英文标题】：DifferentroutesfordifferentsubdomainsinNuxt.js【发布时间】：2019-07-2006:35:20【问题描述】：假设有两个子域为一个nuxt实例工作。他们应该有不同的页面结构。例如可以是：pages/index.vue//technicale... 查看详情
Nuxt.js + vuetify 图像未加载
】Nuxt.js+vuetify图像未加载【英文标题】：Nuxt.js+vuetifyimagenotloading【发布时间】：2020-07-2515:22:12【问题描述】：我正在使用Nuxt.js+Vuetify，但图像无法加载到我的下一页文件中。例如，在我的./pages/browse/index.vue中，我有一个像这样的... 查看详情
Nuxt.js 自定义加载器不会立即加载
】Nuxt.js自定义加载器不会立即加载【英文标题】：Nuxt.jscustomloadernotloadinginstantly【发布时间】：2021-06-0403:28:46【问题描述】：所以我的自定义加载器不会像瞬间加载那样立即加载，然后它在这里加载是我的网站，我的目标是加载... 查看详情
nuxt.js入门安装及灵活使用(代码片段)
...础路由3.3、动态路由3.4、动态命名路由3.5、默认路由3.6、嵌套路由3.7、过渡动效3.7.1全局过渡动效设置3.7.2、自定义动画4、视图4.1、默认模板4.2、默认布局4.2.1、布局概述4.2.2、布局分析4.2.3、公共导航4.3、自定义布局4.4、错误页... 查看详情
如何在 nuxt.js 上手动触发路由？
】如何在nuxt.js上手动触发路由？【英文标题】：Howtomanuallytriggerroutingonnuxt.js?【发布时间】：2021-07-2623:41:01【问题描述】：我想在回调中登录后手动导航到主页。methods:asyncuserLogin()varsession_url="/api/v1/authenticate";axios.post(session_url,thi... 查看详情
在 Nuxt.js 中完全呈现路由后运行函数
】在Nuxt.js中完全呈现路由后运行函数【英文标题】：RunfunctionAFTERroutefullyrenderedinNuxt.js【发布时间】：2019-09-0519:51:09【问题描述】：背景：我正在使用Nuxt构建一个s-s-r网站。我想运行一个脚本到fixsometypographyissues（标题中的孤立... 查看详情
如何在 Nuxt 中使路由区分大小写
】如何在Nuxt中使路由区分大小写【英文标题】：HowtomakeroutescasesensitiveinNuxt【发布时间】：2019-12-2017:32:18【问题描述】：我使用nuxt.js+vue.js。我需要创建路由器的区分大小写。我发现了以下属性：caseSensitive。我正在尝试将它放入n... 查看详情
当 nuxt.js (vue.js) 中的路由更改时，Facebook 分享按钮消失
】当nuxt.js(vue.js)中的路由更改时，Facebook分享按钮消失【英文标题】：Facebooksharebuttondisappearwhenroutechangedinnuxt.js(vue.js)【发布时间】：2021-11-1913:01:57【问题描述】：在我的nuxt.js("nuxt":"^2.15.7")网络应用程序中，我正在使用fullcodeexampl... 查看详情
Angular 9 嵌套延迟加载模块，带有嵌套路由器出口
】Angular9嵌套延迟加载模块，带有嵌套路由器出口【英文标题】：angular9nestedlazyloadedmoduleswithnestedrouteroutlets【发布时间】：2020-10-0117:11:56【问题描述】：我正在尝试使用Angular9开发SPA，我几乎尝试延迟加载每个组件及其所有子组... 查看详情
Nuxt.js 和内容丰富的网站无法正确生成动态路由
】Nuxt.js和内容丰富的网站无法正确生成动态路由【英文标题】：Nuxt.js&contentfulwebsitenotgeneratingdynamicroutesproperly【发布时间】：2019-05-0107:23:32【问题描述】：我刚刚建立了一个nuxt.js和内容丰富的网站。当人们访问网站时，需要... 查看详情
vue-awesome-swiper使用教程
...true则表示校验通过，如果返回false则表示校验未通过。⑤嵌套路由Ⅴ.布局组件特殊的布局组件：error布局组件（error是关键字，只能取这个名字）Ⅵ.设置全局样式Ⅶ.ElementUI使用测试的时候不要范如下错误：Ⅷ.发送请求➀.生... 查看详情
(Nuxt.js/Vue.js) - 脚本只运行一次，更改路由/刷新页面后停止运行
】(Nuxt.js/Vue.js)-脚本只运行一次，更改路由/刷新页面后停止运行【英文标题】：(Nuxt.js/Vue.js)-Scriptonlyworksonce,stopsworkingafterchangingroute/refreshingthepage【发布时间】：2019-08-1609:51:21【问题描述】：我正在将我的项目网站“转移”到Vue.j... 查看详情