js楼层跳跃

<div id="app">
  <nav>
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </nav>
  <div :is="currentView"></div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
<script>
  const Home = { template: '<div>Home Content</div>' }
  const About = { template: '<div>About Content</div>' }
  const Contact = { template: '<div>Contact Content</div>' }

  const app = Vue.createApp({
    data() {
      return {
        currentView: 'Home'
      }
    },
    watch: {
      '$route.hash': {
        immediate: true,
        handler(newHash) {
          this.currentView = newHash.slice(1) || 'Home'
        }
      }
    }
  })

  app.component('Home', Home)
  app.component('About', About)
  app.component('Contact', Contact)

  app.use(VueRouter.createRouter({
    history: VueRouter.createWebHashHistory(),
    routes: [
      { path: '/home', component: Home },
      { path: '/about', component: About },
      { path: '/contact', component: Contact }
    ]
  }))

  app.mount('#app')
</script>