Question

我正在使用Vue Router并设置meta对象字段，该字段用于设置页面标题和说明。

现在我设置这样的路线：

[...
{
   path: '/page1',
   component: Page1Component,
   meta: {
      title: 'Title for page1'
   }
}
...]

，然后将其与DOM同步：

router.beforeEach((to, from, next) => {
    document.title = to.meta.title;
    next();
});

我的一条路线中，我想在标题中使用查询字符串，但是无法将函数传递给meta对象。有没有一种方法可以完成而无需在组件中定义标题？

例如，我想做的事：

[...
{
   path: '/page1',
   component: Page1Component,
   meta: (route) => {
      title: `dynamic title is ${route.query.param}`
   }
}
...]

Answer 1

VueRouter不支持将路由的meta属性设置为您想要的功能。

但是您可以将title属性设置为将route作为参数的函数：

{
   path: '/page1',
   component: Page1Component,
   meta: {
      title: route => `dynamic title is ${route.query.param}`
   }
}

然后在beforeEach钩子中添加一个检查，以将document.title设置为title函数的返回值（如果是函数）：

router.beforeEach((to, from, next) => {
    const { title } = to.meta;
    document.title = typeof title === 'function' ? title(to) : title;
    next();
});

Answer 2

如vue router documentation中所述，导航保护中的#include <stdio.h> long long int a,i,d; int remain(long long int y){ if(y==0) return 1%d; else if(y==1) return a%d; else if(y%2==0) {long long int temp=remain(y/2); return (temp*temp)%d;} else if(y%2==1) return ((remain(y-1))*(~~remain(1)~~))%d; } int main(void){ scanf("%lld %lld %lld",&a,&i,&d); printf("%lld\n",remain(i)); return 0; }和to对象都是路由对象，就像组件中可访问的from变量一样。

因此，您可以这样做：

$route

定义路线的元数据时，我可以访问路由器查询参数吗？

2 个答案: