（十六）Vue3.x中使用vue-router的新特性

本章我们将聊到Vue-Router在vue3.x中的使用方式及特性。

1、描述：区别于vue2，在vue3中，vue-router将使用新的方法来创建路由，其中重要的是：createRouter, createWebHashHistory, createWebHistory这三个方法。
2、创建：

// router.js
import { createRouter, createWebHashHistory, createWebHistory } from "vue-router";
const routes = [...];
const router = createRouter({
  // 区别于vue2的mode，vue3中将使用history属性来决定采用哪种路由模式
  history: createWebHashHistory(), // 默认为Hash模式，可设置createWebHistory模式
  // 区别于vue2的base，vue3中的基础路由路径将作为createWebHashHistory或者createWebHistory的唯一参数配置到路由中。
  routes
});
export default router;

// main.js
import router from './routes';
const app = createApp(App);
// 注册路由
app.use(router);

3、扩展：在组件中使用路由，查看路由。

// index.vue
// vue-router库当中暴露了useRouter和useRoute两个方法供组件使用，还暴露有其他方法。
import { useRouter, useRoute } from 'vue-router';
import { onMounted, getCurrentInstance } from 'vue';

export default {
  setup() {
    const { proxy } = getCurrentInstance();
    const router = useRouter();
    const route = useRoute();
    onMounted(() => {
      console.log(proxy.$router === router) // true
      console.log(route) // {path, params, query...}
    });
  }
};

下一章：（十七）Vue3.x使用provide/inject来代替vuex的实现方式
上一章：（十五）Vue3.x中我们将采用mitt实现全局事件总

ps：未来的，我期待着；过去的，我释怀着；可都不及我珍惜的，眼前的。