安裝router

安裝(zhuang)完成(cheng)后，可以在(zai)package.json中查看vue-router的版本：

創建router

創(chuang)建router文(wen)件夾并在文(wen)件夾中創(chuang)建 index.js . 內容如下(xia)：

可(ke)以看到，在新版本(ben)的vue-router中，是通過createRouter方法來創建一個路由的，這是和以前版本(ben)不同的地方。

配置(zhi)history模式，在新版本(ben)中也使用(yong)了(le)內置(zhi)的(de)方法設置(zhi)： “history: createWebHistory()”，這個地(di)方和以前(qian)的版本也不同。

使用router

使用router，要在 template 中(zhong)添(tian)加 <router-view />，告(gao)訴程序通過路由加載的(de)頁面渲染的(de)位置。我們來改(gai)造(zao) App.vue文件:

然后在(zai)main.js中使用(yong)創建好的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中，使用插件和依(yi)賴庫(ku)時通(tong)過(guo)use方(fang)法，不過(guo)用的(de)是(shi)(shi)創建實例(li)的(de)use方(fang)案(an)。在Vue 2中使用的(de)是(shi)(shi) Vue.use()。