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