How to handle $route params with Vue 2 SSR?

34 views Asked by At

The goal is to parse route params, find the item in the store (by param from the URL), and write some item's properties to the raw HTML with Vue 2 SSR:

<template>
    <div :class="$style.issue">
        <div>
            <div>{{ issue.title }}</div> <!-- not rendered by the server, only on the FE -->
            <a :href="issue.url">{{ issue.url }}</a> <!-- not rendered by the server, only on the FE -->
        </div>
    </div>
</template>

This is how I'm trying to access the issue:

<script>
import { createNamespacedHelpers } from 'vuex';
const { mapState } = createNamespacedHelpers('issues');

export default {
    computed: {
        ...mapState({
            issues: state => state.issues,
        }),
        issue() {
            return this.issues.find((issue) => issue.id == this.$route.params.id);
            // I believe something is wrong with this.$route.params,
            // probably it's not there while doing SSR
        }
    }
}
</script>

The store is ready, I can see it in the pagesource. What am I doing wrong? Thanks.

0

There are 0 answers