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

Question

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

_slug.vue 页面上也是一个动态导航，从 REST API 触发在同一页面上的视图如下：http://localhost/slug/slug2

第一个问题： 用户在起始页触发主题，获取 _slug.vue 上的导航 如何将第一个菜单项设置为活动状态，以便直接显示其内容，而无需用户先单击菜单项？

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

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

我将通过创建 vuex 商店“购物车”来获得它

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

喜欢：

http://localhost/slug/slug2?param1=test&param2=test2
http://localhost/slug/slug10?param1=test&param2=test2

你可以看到第二个 slug 是动态的，第一个 slug 只是通过在起始页上选择它是动态的。

这是我的代码：

pages/index.vue

<template>
  <nav class="navigation">
    <ul>
      <li
        v-for="(link, index) in links"
        :key="index"
      >
        <nuxt-link
          :to="link.shortName"
          :data-code="link.shortName"
        >
          {{ link.name }}
        </nuxt-link>
      </li>
    </ul>
  </nav>
</template>

pages/_slug.vue

<template>
  <div class="calculator">
    <nav class="navigation">
      <ul>
        <li
          v-for="(link, index) in $store.state.calculatorNavigation"
          :key="index"
        >
          <nuxt-link
            :to="{ path: '/' + $store.state.carResult.id + '/' + link.id}"
            :title="link.name"
            append
          >
            {{ link.shortName }}
          </nuxt-link>
        </li>
      </ul>
    </nav>

    <nuxt-child></nuxt-child>
  </div>
</template>

pages/slug/_category.vue

<template>
  <div>
    here show the data for every menu point from the first /slug like /slug/slug2
  </div>
</template>

Answer 1

Nuxt.js 根据当前位置向所有 nuxt-link 实例添加特殊类名。默认情况下，如果当前位置以 nuxt-link 的 URL 开头，则默认设置 nuxt-link-active；如果完全匹配 (classnames can be adjusted in config)，则设置 nuxt-link-exact-active。

在动态页面中获取路线的参数你必须使用asyncData:

<!-- pages/_slug.vue -->

<template>
  <h1>{{ this.slug }}</h1>
</template>

<script>
  export default {
    async asyncData({ params }) {
      const slug = params.slug // When calling /abc the slug will be "abc"
      return { slug }
    }
  }
</script>

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

<!-- pages/_slug.vue -->

<template>
  <h1>{{ this.slug }} / {{ this.param1 }}</h1>
</template>

<script>
  export default {
    async asyncData({ params, query }) {
      const slug = params.slug
      const param1 = query.param1 // When calling /abc?param1=test the param will be "test"
      return { slug, param1 }
    }
  }
</script>

如果您还需要在客户端访问路由的参数和查询，您仍然可以使用$route builtin（即用于数据获取）。

<script>
  export default {
    mounted() {
      const slug = this.$route.params.slug
      const param1 = this.$route.query.param1

      // some fetching here
    }
  }
</script>

所以，现在你的页面结构应该是这样的：

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

因此，在_slug.vue 路由器参数slug 将可用。在 _category.vue 中，slug 和 category 参数都将可用。