Context failed to pass in dynamic route

Description

Having used Gridsome from version 0.5, I’m relatively new to the newly introduced dynamic routing in version 0.7.5

I have created an empty file /customer/[:id].vue and use an API that GET all customer information and pass the context to each route by using dynamic route /customer/:id .

However, when I click into individual customer page, for example, /customer/1 and /customer/2 , both context.name remain the same value. context.name is called in the customer template.

I haven’t implemented any rewrite rule as I’m not entirely sure where and how I should apply it based on my use case. The documentation is pretty limited too.

Any help? Am I using dynamic route the correct way?

// gridsome.server.js

api.createManagedPages(async ({ createPage }) => {
    const agent = new https.Agent({
      rejectUnauthorized: false
    });
    const { data } = await axios.get(
      "https://api.mycompany.com/Customer/GetAll",
      { httpsAgent: agent }
    );

    data.forEach(item => {
      console.log(item.customer_id)
      console.log(item.name)
      console.log(item.alias)
      createPage({
        path: `/customer/:id(\\d+)`,
        component: "./src/templates/Customer.vue",
        context: {
          id: item.customer_id,
          name: item.name,
          alias: item.alias
        }
      });
    });
  });

// /templates/Customer.vue 

<template>
  <Layout>
    <div class="main-content">
      <div class="header">
        <div class="container-fluid">
          <!-- Body -->
          <div class="header-body">
            <div class="row align-items-center">
              <div class="col-auto">
                <!-- Avatar -->
                <a href="#!" class="avatar avatar-lg">
                  <span class="avatar-title rounded bg-white text-warning">
                    <span class="fe fe-user"></span>
                  </span>
                </a>
              </div>
              <div class="col ml-n3 ml-md-n2">
                <!-- Pretitle -->
                <h6 class="header-pretitle">Customer</h6>

                <!-- Title -->
                <h1 class="header-title">{{ $context.name }}</h1>
              </div>
            </div>
            <!-- <SingleCustomerTopNavbar /> -->
            <div class="row align-items-center">
              <div class="col">
                <ul class="nav nav-tabs nav-overflow header-tabs">
                  <li
                    class="nav-item"
                    v-for="tab in tabs"
                    v-bind:key="tab"
                    v-on:click="currentTab = tab"
                  >
                    <a
                      href="#"
                      class="nav-link"
                      v-bind:class="['tab-button', { active: currentTab === tab }]"
                    >{{ tab }}</a>
                  </li>
                </ul>
              </div>
            </div>
            <!-- end nav bar -->
          </div>
        </div>
      </div>
      <component v-bind:is="currentTabComponent" v-bind:customer_name="$context.name" v-bind:customer_id="$context.id"></component>
    </div>
  </Layout>
</template>

<script>
import Layout from "~/layouts/Default.vue";
import SingleCustomerTopNavbar from "~/components/navbar/SingleCustomerTopNavbar.vue";
import Overview from "~/components/customer/Overview.vue";
import News from "~/components/customer/News.vue";
import Products from "~/components/customer/Products.vue";
import Visits from "~/components/customer/Visits.vue";

export default {
  data() {
    return {
      currentTab: "Overview",
      tabs: ["Overview", "News", "Products", "Visits", "Share"]
    };
  },
  computed: {
    currentTabComponent: function() {
      return this.currentTab;
    }
  },
  components: {
    Layout,
    SingleCustomerTopNavbar,
    Overview,
    News,
    Products,
    Visits
  }
};
</script>

[brandonpittman]

createPage with a dynamic path will only create one page, so thats why you always get the same context. I think what you should do instead, is to use createRoute. It’s not documented yet, but I don’t think it is going to change and works pretty well. It is used for templates, for example. Here is how it works:

@hjvedvik When is this going to be officially in the docs?

[u12206050]

I am having the same issue, though it also doesn’t even work when I create explicit pages:

console.log(`Creating topic: ${topic.slug}`)
        createPage({
          path: topic.slug,
          component: './src/templates/ql_Topic.vue',
          context: {
            id: topic.id
          }
        })

        const perPage = 1
        const noOfPages = Math.ceil(topic.count / perPage)
        for(let i = 1; i <= noOfPages; i++) {
          createPage({
            path: `${topic.slug}/${i}`,
            component: './src/templates/ql_Topic.vue',
            context: {
              id: topic.id,
              page: i
            }
          })
        }

when querying allPage I do see the correct context, but it is never sent to the template, eg. $context is {}

      {
        "path": "/topic/strategi/",
        "context": {
          "id": "1"
        }
      },
      {
        "path": "/topic/tanker/",
        "context": {
          "id": "2"
        }
      },
      {
        "path": "/topic/vart-arbeid/",
        "context": {
          "id": "3"
        }
      },
      {
        "path": "/topic/vart-arbeid/1/",
        "context": {
          "id": "3",
          "page": 1
        }
      },