[Vuejs]-Getting a value from a nested template in vue

by

0👍

The Vue docs recommend not using $router directly but instead configuring props to pass to the routed components:

const routes = [
  { path: '/', redirect: '/page-a', component: { template: `<router-view></router-view>` }, name: 'Home' },
  { path: '/page-a', component: Page, props: { titleOfPage: 'Page A' }},
  { path: '/page-b', component: Page, props: { titleOfPage: 'Page B' }},
];

If your props are dynamic and depend on the current route, you can pass a function to the props property of each route configuration:

{ path: '...', component: ..., props: (route) => ({ query: route.query.q }) }

To solve your issue, you can simply create a page component which receives the props from the router and render your sidebar component in its template:

<!-- template for page component -->
<template>
  <div id="body">
    <sideBar :menu="menu" :tableName='tableName' :titleOfPage='titleOfPage'></sideBar>
    <div id="main">
      <h1>{{ titleOfPage }}</h1>
      <!-- ... -->
    </div>
  </div>
</template>

DEMO: stackblitz

👤FK82

Leave a comment