Question

例如，我的路线中有这条路线：

{ name: 'user', path: '/user/:id', component: User, props: { default: true, sidebar: false }, meta: { showFooter: false, title: `Viewing User ${route.params.id}` } }

我本质上是想访问URL的id参数，以设置页面标题，但是我不想通过组件来实现。

使用$ {route.params.id}返回未定义，是否存在我可以访问的对象，该对象将得到相同的结果？我是Vue和Vue-router的新手，所以不确定是否可行。

也许我应该在组件中进行设置，如果是这样，我很乐意了解为什么这是一种更好的方法:)

Answer 1

您可以简化此过程，只需在组件中使用计算属性即可。

computed: {
  title() { return `Viewing User ${this.$route.params.id}` }
}

如果要抽象化实现（针对多个组件等），请在beforeRouteUpdate中设置元数据。然后，您可以访问this.$route。

beforeRouteUpdate (to, from, next) {
    // called when the route that renders this component has changed,
    // but this component is reused in the new route.
    // For example, for a route with dynamic params `/foo/:id`, when we
    // navigate between `/foo/1` and `/foo/2`, the same `Foo` component instance
    // will be reused, and this hook will be called when that happens.
    // *** has access to `this` component instance. ***
  },

-> 有权访问this组件实例

访问路由器元中的参数/动态URL属性以获取动态页面标题？

1 个答案: