vue 3路由 带注解 文章是对某网站的教程加注释介绍

上代码：

<script>
import Home from './components/Home.vue'
import About from './components/About.vue'
import NotFound from './components/NotFound.vue'

const routes = {
  '/': Home,
  '/about': About
}

export default {
  data() {
    return {
      //通过 window.location. hash = hash 这个语句来调整地址栏的地址
      //使得浏览器里边的“前进”、“后退”按钮能正常使用（实质上欺骗了浏览器）。
      currentPath: window.location.hash
    }
  },
  computed: {
    //返回一个组件
    currentView() {//slice 函数[1,字符串长度) 如果没有值 为/  理解为 前两个组件都不是，就第三个组件
      return routes[this.currentPath.slice(1) || '/'] || NotFound
    }
  },
  mounted() {
    //addEventListener 方法 对 window 对象调用 addEventListener 方法，
    // 注册一个加载事件处理程序 window.addEventListener("load", init, false) ; function init(){ //网页加载完毕后的事件处理程序 }
    
    //window.location.hash值的变化以及浏览器地址栏（#号后面的值发生变化）任何一方发生变化，
    // 都会触发onhashchange事件 hashchange事件
    window.addEventListener('hashchange', () => {
      this.currentPath = window.location.hash
    })
  }
}
</script>

<template>
  <a href="#/">Home</a> |
  <a href="#/about">About</a> |
  <a href="#/non-existent-path">Broken Link</a>

  <!-- 使用component 占位符来展示组件 -->
  <!-- 注意 :is 是绑定的属性，需要在实例的data中绑定的 组件的名称是字符串 -->
  <!-- 其中 他还提供了 mode属性来切换动画的先进先出的问题  -->
  <component :is="currentView" />
  <!--个人理解 这里的component 是展示 组件的内容 专门来展示用的 固定的 is 是绑定了一个函数 这个函数的功能改变浏览器的地址栏的地址-->
</template>

具体解释看注解，要被气死了

连接 具体的代码在这里：

Vue SFC Playground

component 标签解释：Vue组件（35）动态组件 component 的 is 到底可以是啥？ - 金色海洋（jyk） - 博客园