2.前端路由的配置和使用-编程知识

2.前端路由的配置和使用

一，路由的作用

路由的作用就是将页面文件跟URL地址形成对应匹配

二，如何安装路由

这里我们采用pnpm的方式在项目中执行

pnpm install vue-router@next --save

在这里插入图片描述

三，路由如何使用

首先创建一个我们需要访问的页面文件，这里我先创建了一个登录界面
路径：src\views\index\LoginPage.vue

然后我们先在我们的文件目录中创建router文件夹，然后新建路由文件index.ts

import { createRouter, createWebHistory } from 'vue-router'
import LoginPage from '../views/index/LoginPage.vue'
const router = createRouter({history: createWebHistory(),routes: [{ path: '/login', component: LoginPage }]
})
export default router

这个有个小插曲，一直提示我这个路径的页面文件不存在，网上搜了下好像是Vetur跟Vue3不兼容的关系，但是我这里安装Vetur，所以我把Vue - Official重新安装了下，然后重启了下Visual Studio Code就解决了

Cannot find module ‘…/views/index/LoginPage.vue’ or its corresponding type declarations.ts(2307)
在这里插入图片描述
然后在你的main.ts文件下添加引用route的引用

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import router from './router'
createApp(App)
.use(ElementPlus)
.use(router)
.mount('#app')