vue 路由的 meta 如何根据接口动态设置?

作者站长头像
站长
· 阅读数 12

比如我要进入一个详情页面,进入前的参数只有 id 值

我要通过这个id去查询详情接口,并把返回的详情中的名称设置为路由的 meta 中的title

此时我要如何实现?

回复
1个回答
avatar
test
2024-06-25

补充新回答

组件内

routeTo:null //data定义

watch: {
      $route: {
        handler(to, form) {
          this.routeTo = to;
          console.log(to);
          console.log(form);
        },
        immediate: true
      }
    }

获取到name 调用routeTo修改

 setTimeout(()=>{
        this.routeTo.meta.title='测试测试';
        console.log(this.$route)
      },1000)

answer image

旧回答

跳转详情时把要改的名字带上去

  this.$router.push({
          path: 'xxxxx',
          query: {name}//name就是你要显示的名字
        });

然后在路由文件里改

 {
      path: 'xxxxx',
      name: 'xx',
      component: 'xxxxx',
      meta: {
        title: '',
      },
      beforeEnter: (to, from, next) => {
        to.meta.title = to.query.name ? `${to.query.name}` : '通用名字';
        next()
      },
    },
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容