安装router

安装完成后，可以在package.json中查看vue-router的版本：

创建router

创建router文件夹并在文件夹中创建 index.js . 内容如下：

可以看到，在新版本的vue-router中，是通过createRouter方法来创建一个路由的，这是和以前版本不同的地方。

配置history模式，在新版本中也使用了内置的方法设置： “history: createWebHistory()”，这个地方和以前的版本也不同。

使用router

使用router，要在 template 中添加 <router-view />，告诉程序通过路由加载的页面渲染的位置。我们来改造 App.vue文件:

然后在main.js中使用创建好的router：

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import router from './router';

createApp(App)
    .use(router)
    .mount('#app')

在Vue 3中，使用插件和依赖库时通过use方法，不过用的是创建实例的use方案。在Vue 2中使用的是 Vue.use()。