Using router params in dynamic links

I’m developing a simple restaurant web app. Which has list of restaurants, item categories and items pages.

Here is my routes.js

// FNB Restaurants
{
    path: '/fnb-restaurants/',
    componentUrl: './pages/fnb-restaurants.html',
    name: 'fnb-restaurants',
},
// FNB Categories
{
    path: '/fnb-categories/:restaurantId/',
    async(routeTo, routeFrom, resolve, reject) {
        let this_restaurant = routeUserProfile(routeTo);
        resolve(
            {
                componentUrl: './pages/fnb-categories.html',
            },
            {
                context: {
                    restaurant: this_restaurant,
                },
            }
        )
    },
    // componentUrl: './pages/fnb-categories.html',
    name: 'fnb-categories',
},
// FNB Items
{
    path: '/fnb-items/:restaurantId/:categoryId/',
    async(routeTo, routeFrom, resolve, reject) {
        resolve(
            {
                componentUrl: './pages/fnb-items.html',
            },
            {
                context: {
                    //
                },
            }
        )
    },
    // componentUrl: './pages/fnb-items.html',
    name: 'fnb-items',
},

In fnb-categories.html page I have to create dynamic links to fnb-items.html page.

Here is my fnb-categories.html

<template>
<div class="page">
    <div class="navbar">
        <div class="navbar-bg"></div>
        <div class="navbar-inner sliding">
            <div class="left">
                <a href="#" class="link back">
                    <i class="icon icon-back"></i>
                    <span class="if-not-md">Back</span>
                </a>
            </div>
            <div class="title">{{restaurant.name}}</div>
        </div>
    </div>
    <div class="page-content">
        <div class="block-title text-align-center">{{userLabels.blk_title_2}}</div>
        <div class="block">
            <div class="row justify-content-center">
                {{#each fnbCategories}}
                <a class="col-33 text-align-center"
                   href="/fnb-items/:restaurantId/{{this.id}}/">
                    <img class="width-100" src="../assets/icons/fnb-categories/{{this.icon}}"/>
                    <p class="no-margin">{{this.name}}</p>
                </a>
                {{/each}}
            </div>
        </div>
    </div>
</div>

Return

return {
    // Component Data
    data: function () {
        // Must return an object
        return {
            user: appUser,
            userLabels: appUser.labels,
            fnbCategories: appStore.fnb_categories,
            name: 'Jimmy',
            age: 25,
            like: ['Tennis', 'Chess', 'Football'],
            clickCounter: 0,
            listItems: null,
            listLoading: null,
        }
    },

When use {{restaurant.id}} instead of :restaurantId in the link, restaurant list is not clickable.

I want to use the dynamic restaurant id as the :restaurantId. How do I use the same $router param?

Thanks

Use router API to get params

router.params