yulimchen / vue3-h5-template

🌱 A ready-to-use mobile project base template built with the Vue3, Vant, and Vite. | 基于 Vue3、Vite5、TypeScript/JavaScript、Tailwindcss、Vant4,开箱即用的移动端项目基础模板
https://yulimchen.github.io/vue3-h5-template/
MIT License
1.06k stars 255 forks source link

请教一下怎么在每个页面给 NavBar 分别设置 title? #45

Closed magic3584 closed 11 months ago

magic3584 commented 11 months ago

插槽看了还是不太懂,NavBar 和 每个 component 也没有嵌套关系

      <van-nav-bar
        fixed
        placeholder
        left-arrow
        safe-area-inset-top
        @click-left="onClickLeft"
      >
        <template #title="slotProps">
          {{ slotProps }}
        </template>
      </van-nav-bar>

      <router-view v-slot="{ Component }">
        <keep-alive :include="cachedViews">
          <component :is="Component" />
        </keep-alive>
      </router-view>
yulimchen commented 11 months ago

可以尝试 NavBar title 属性绑定路由的 meta.title 值

magic3584 commented 11 months ago
        <template #title>
          11 {{ router.currentRoute.name }}
        </template>

WX20231212-182607

很奇怪 router.currentRoute 能出现一大串,加上 name 就无了。。。可是明明有值

yulimchen commented 11 months ago
const title = computed(() => {
  const route = router.currentRoute.value;
  return route.meta.title;
});

<template #title> {{ title }} </template>
magic3584 commented 11 months ago

原来是个 ref... 感谢大佬!