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

Questions
1

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

<f7-list-item
            :link="`/all-categories`"
            :title="$t('All Categories')"
            view="#home_view"
            panel-close>
          </f7-list-item>

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?

2

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

:link="`/all-categories`":link="`/all-categories/`"

Or remove trailing slashes from routes

3

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

4

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