router-link inline meta

meta option in router-link tag is not regconized by Vue

by HuyPham55

HTML

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="	https://unpkg.com/vue-router@3.5.1/dist/vue-router.js"></script>

<div id="app">
  <router-link :to="{path: '/inlineMeta', meta: {title: 'Inline meta'}}">Inline meta</router-link>
  <router-link :to="{path: '/routeMeta'}">Meta declared in routes</router-link>
  <router-view></router-view>
</div>

JavaScript

Vue.use(VueRouter);

const cComponent = {
  data() {
    return {
      fetchedData: null
    }
  },
  template: `<div>{{$route.meta.title}}</div>`,
}
const routes = [{
    path: "/inlineMeta",
    component: cComponent,
  },
  {
    path: "/routeMeta",
    meta: {
      title: 'Meta declared in routes'
    },
    component: cComponent,
  }
]

const router = new VueRouter({
  mode: "history",
  routes,
})

router.beforeEach((to, from, next) => {
  console.log("The meta title is : " + to.meta.title);
})

const app = new Vue({
  el: "#app",
  router,
})