Estoy tratando de pasar meta a través de la etiqueta <router-link> . Me gusta esto:
<router-link :to="{path: '/inlineMeta', meta: {title: 'Inline meta'}}"> Inline meta </router-link> Quiero lograr esto porque puedo pasar metas dinámicamente desde un marco de back-end directamente en la etiqueta misma. Declarar la opción de routes en un archivo JS simplemente no tiene ese poder.
Teóricamente, cualquier objeto pasado a través de prop debería ser empujado a la pila del router , ¿verdad? Pero en este caso no lo parece.
Si declaro meta en la opción de routes , definitivamente funciona. No hay duda sobre eso.
Me pregunto si es posible hacerlo, y ¿cómo lo haría?
Un pequeño violín para ilustrar el problema. Haga clic en URL y observe la consola. No puedo hacer que el fragmento de StackOverflow funcione correctamente.
Vue.use(VueRouter); const cComponent = { data() { return { fetchedData: null } }, template: `<div>The meta is: {{$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, }) <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>Si desea pasar los parámetros entre dos componentes, use props . v-bind:to en <route-link> solo se usa para la coincidencia de ruta, por lo que no puede usarlo para establecer el valor de meta. Si desea configurar el meta sin declararlo en la ruta, creo que usar "this.$route.meta.title="Inline meta" " en js. como usar el evento de clic:
<li @click="setMeta"> <router-link :to="{path: '/inlineMeta'}"> Inline meta </router-link> </li>y en js:
method:{ setMeta(){ this.$route.meta.title="Inline meta"; } } también puede usar mounted() en el nuevo componente al que acaba de enrutar:
mounted(){ this.$route.meta.title="Inline meta" }y el meta se modificará después de recargar. Esto puede funcionar aunque no parezca tan elegante.