三、vue3.0之路由(vue-router)配置及语法

我们今天来看一下vue3.0的路由(vue-router)，在看vue3.0路由之前，我们先来和vue2.0的路由做个对比，看看现在两者之间的区别。

1、从引入来说：

vue2.0 ，通过vue-router直接引入vueRouter

import VueRouter from "vue-router";

vue3.0， 通过vue-router引入createRouter, createwebHashHistory | createWebHistory

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'

2创建实例：

vue2.0，直接创建vueRouter实例

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
});

vue3.0，调用createRouter方法

const router = createRouter({
  history: createWebHashHistory(),
  routes
});

3从路由跳转：

vue2.0，直接$router

this.$router.push({path: 路径, query: 参数})

vue3.0,调用useRouter方法

import { useRouter } from 'vue-router'
const