F7 Vue router always navigating to page not found (generic route)

I am trying to understand the working of f7-router but till now I am failing. Following is my route code.

let routes = [
    path: '/',
    component: Home,
    master: true
    path: '/all-categories/',
    component: AllCategories
    path: '/categories/:category/',
    component: Category
    path: '(.*)',
    component: PageNotFound

for(const index in routes) {
  routes[index]['options'] = {
    reloadCurrent: true

And my link looks like following

            :title="$t('All Categories')"

And the view looks like following

<f7-view :pushState="true" id="home_view" class="safe-areas" push-state-separator="" main :stack-pages="true"></f7-view>

Whenever I click on the URL generated by the link it take me to 404 page instead of the page the URL is for. What am I doing wrong?

Pay attention to trailing slashes /, in your routes and link they are different, change it to:


Or remove trailing slashes from routes

I have tried it, with slashes without slashes everything but unfortunately nothing is working.

NVM, looks like it worked. Thanks alot, really appreciate the help.