Vue Router

相较于之前vue2的路由，vue3的路由发生了一些改变，首先路由声明方式发生了变化

vue2声明方式

const router = new VueRouter({
  mode: 'history', // hash 、abstract 三种模式
  routes
});

vue3声明方式

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),  //createWebHistory
  routes
})

其次，在实例中访问路由，无论是vue2 还是 vue3 都可以通过 this.$router 的形式访问它，并且以 this.$route 的形式访问当前路由，但是由于vue3 Composition API写法的出现在setup钩子中无法访问this中的对象和方法，因此我们需要通过useRouter 或 useRoute 函数

vue3 setup 钩子中访问 route 对象的方式

<script setup>
  import {useRouter, useRoute} from 'vue-router';
  const route = useRoute(); 
  const router = useRouter(); 
  console.log(route.path);// home
</script>

route 对象是一个响应式对象，所以它的任何属性都可以被监听