App.vue 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. <script setup lang="ts">
  2. import { showToast } from 'vant';
  3. import { watch, ref } from 'vue'
  4. import { useRouter, useRoute } from 'vue-router'
  5. const router = useRouter()
  6. const route = useRoute()
  7. const title = ref('首页')
  8. const isBack = ref(false)
  9. // import HelloWorld from './components/HelloWorld.vue'
  10. // import tabbar from '@/components/tabbar.vue'
  11. watch(
  12. route,
  13. (newValue) => {
  14. title.value = newValue.meta.title || '首页'
  15. },
  16. {
  17. deep: true
  18. }
  19. )
  20. watch(title, (newValue) => {
  21. isBack.value = newValue !== '首页'
  22. })
  23. const onClickRight = () => {
  24. }
  25. </script>
  26. <template>
  27. <!-- <div>
  28. <a href="https://vite.dev" target="_blank">
  29. <img src="/vite.svg" class="logo" alt="Vite logo" />
  30. </a>
  31. <a href="https://vuejs.org/" target="_blank">
  32. <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
  33. </a>
  34. </div>
  35. <HelloWorld msg="Vite + Vue" /><tabbar /> -->
  36. <van-nav-bar
  37. :title="title"
  38. :left-text="isBack ? '返回' : ''"
  39. :left-arrow="isBack"
  40. @click-right="onClickRight"
  41. />
  42. <div class="view-box">
  43. <RouterView />
  44. </div>
  45. </template>
  46. <style scoped>
  47. .view-box {
  48. height: calc(100vh - 70px);
  49. }
  50. </style>