<script setup lang="ts">
import { showToast } from 'vant';
import { watch, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()
const title = ref('首页')
const isBack = ref(false)
// import HelloWorld from './components/HelloWorld.vue'
// import tabbar from '@/components/tabbar.vue'

watch(
  route,
  (newValue) => {
    title.value = newValue.meta.title || '首页'
  },
  {
    deep: true
  }
)

watch(title, (newValue) => {
  isBack.value = newValue !== '首页'
})
const onClickRight = () => {

}
</script>

<template>
  <!-- <div>
    <a href="https://vite.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <HelloWorld msg="Vite + Vue" /><tabbar /> -->
  <van-nav-bar
    :title="title"
    :left-text="isBack ? '返回' : ''"
    :left-arrow="isBack"
    @click-right="onClickRight"
  />
  <div class="view-box">
    <RouterView />
  </div>
</template>

<style scoped>
.view-box {
  height: calc(100vh - 70px);
}
</style>
