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