3、路由的配置和使用

1、安裝命令 ：pnpm install vue-router@next --save 

2、新建相關頁面，如圖所示，新建一個LoginPage.vue頁面

 

 3、src目錄下新建文件夾router,文件夾新建路由文件index.ts,在該文件中寫如下內容

import {createRouter,createWebHistory} from 'vue-router'
import LoginPage from '../view/index/LoginPage.vue'

const router=createRouter({
history:createWebHistory(),
routes:[
  {path:"/login",component:LoginPage}

]

})
export default router;

4、 項目中導入路由，在main.ts文件中導入router

import router from './router/index'

app.use(router)

 

5、在App.vue裏面加上路由標籤  <router-view></router-view>

 6、啓動項目瀏覽 npm run dev