Vue.js Nuxt.js动态嵌套视图和参数

我有一个关于Nuxt中的动态和嵌套路由的问题。 我将创建一种计算器。用户可以选择一个主题并进入第一个动态路径-称为_slug.vue-一个来自API的关于该主题的动态导航，在该导航中，用户可以获得关于该主题的详细信息

在

\u slug.vue

页面上还有一个动态导航，从REST API在同一页面上触发如下视图：

http://localhost/slug/slug2

第一个问题： 用户在startpage上触发主题，在_slug.vue上获得导航 如何将第一个菜单项设置为“活动”，以便用户无需首先单击菜单项即可直接显示其内容

• 如果用户单击其他菜单项，则必须更改子视图
• 子视图可以直接在浏览器上输入，并且也可用

第二个问题 在第二步中，我需要解析许多参数来创建所有用户选择，并将链接共享给其他用户

我将通过创建vuex商店“购物车”来实现这一点

如何使用动态路由实现这一点

比如：

您可以看到，第二个段塞是动态的，第一个段塞只有在起始页选择此项时才是动态的

这是我的密码：

页面/索引.vue

{{link.name}

页面/\u slug.vue

{{link.shortName}

页面/slug/_类别.vue

这里显示第一个/slug-like/slug/slug2中每个菜单点的数据

numxt.js根据当前位置向所有

numxt链接

实例添加特殊类名。默认情况下，如果当前位置以

numxt链接的URL开头，则将
numxt链接设置为活动的
，如果完全匹配（），则将
numxt链接设置为活动的

在动态页面中，要获取路由参数，必须使用
asyncData
：


{{this.slug}}
导出默认值{
异步数据（{params}）{
const slug=params.slug//调用/abc时，slug将为“abc”
返回{slug}
}
}

与获取查询字符串的方法相同：


{{this.slug}}/{{this.param1}
导出默认值{
异步数据（{params，query}）{
常量段塞=参数段塞
const param1=query.param1//调用/abc？param1=test时，参数将为“test”
返回{slug，param1}
}
}

如果您需要访问路由的参数并在客户端进行查询，您仍然可以使用
$route
内置（即用于数据获取）


导出默认值{
安装的（）{
常量slug=此。$route.params.slug
const param1=this.$route.query.param1
//有些人在这里打来电话
}
}

因此，现在页面的结构应该如下所示：

pages/
├── _slug/
│   ├── index.vue        -->  ie. http://localhost/slug/
│   └── _category.vue    -->  ie. http://localhost/slug/slug2
└── index.vue            -->  http://localhost/

因此，在
\u slug.vue
中，路由器参数
slug
将可用。在
\u category.vue
中，
slug
和
category
参数都将可用。
实现了您的页面结构，并且在我使用它时它现在可以工作。$router.push，因此我总是从json动态重定向到第一页。现在还有一个问题，如果我在类别之间切换，但在URL中已经有参数（例如test=1），它们就会消失——有办法保留它们吗？谢谢！：）
pages/
├── _slug/
│   ├── index.vue        -->  ie. http://localhost/slug/
│   └── _category.vue    -->  ie. http://localhost/slug/slug2
└── index.vue            -->  http://localhost/