VueRouter 没有收到路由器链接标签中的元属性

Question

我正在尝试通过 <router-link> 标签传递 meta 字段。像这样：

<router-link :to="{path: '/inlineMeta', meta: {title: 'Inline meta'}}">
    Inline meta
</router-link>

我想实现这一点，因为我可以从后端框架直接在标签本身上动态传递元数据。在 JS 文件中声明 routes 选项根本没有这种能力。

理论上，通过 to 属性传递的任何对象都应该被推送到router 堆栈，对吗？但在这种情况下，情况似乎并非如此。

如果我在routes 选项中声明meta，它肯定有效。毫无疑问。

我想知道是否可以这样做，我该怎么做？

---

一个小小提琴来说明问题。单击 URL 并注意控制台。我无法让 StackOverflow sn-p 正常工作。

JSFiddle

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>

Answer 1

如果要在两个组件之间传递参数，请使用props。 <route-link>中的v-bind:to只是用于路由匹配，所以不能用它来设置meta的值。 如果您想设置元而不在路由中声明它，我认为在 js 中使用“this.$route.meta.title="Inline meta"”。 比如使用点击事件：

<li @click="setMeta">
  <router-link :to="{path: '/inlineMeta'}">
    Inline meta
  </router-link>
</li>

在js中：

method:{
    setMeta(){
      this.$route.meta.title="Inline meta";
    }
}

你也可以在你刚刚路由到的新组件中使用mounted()：

mounted(){
  this.$route.meta.title="Inline meta"
}

并且meta会在重新加载后被修改 这可能会起作用，尽管它可能看起来不那么优雅。