前端基础之《Vue（29）—Vue3 路由V4》

一、安装

1、命令

cnpm install vue-router@4

2、配置@映射为src路径

（1）安装对应配置

cnpm install @types/node

（2）配置vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import * as path from "node:path"// vite官方配置文件
export default defineConfig({plugins: [vue()],// 配置别名@指向src目录resolve: {alias: {'@': path.resolve(__dirname, 'src')}}
})

（3）配置tsconfig.app.json
compilerOptions添加一段：

    "baseUrl": ".","paths": {"@/*": ["src/*"]}

二、集成

1、main.ts导入路由模块

// import Vue from 'vue' 在vue3中已经没有这个构造函数了
// 导入createApp工厂方法，用于创建vue实例
import { createApp } from 'vue'
// 导入全局样式
//import './style.css'
// 导入根组件
import App from './App.vue'
import router from './router'//createApp(App).mount('#app')
const app = createApp(App)// 注册路由
app.use(router)// 在vue3中，只能使用$mount挂载，已经淘汰了el选项
app.mount('#app')

2、建立src/router/index.ts

import { createRouter, createWebHashHistory } from 'vue-router'const router = createRouter({history: createWebHashHistory(), // 带#的hash模式routes: [{ path: '/', component: () => import('@/pages/PageA.vue') },{ path: '/xxx', component: () => import('@/pages/PageB.vue')}]})router.beforeEach((to, from, next)=>{next()
})export default router

3、App.vue修改视图结构

<script setup></script><template><router-view></router-view>
</template><style scoped></style>

三、显示路由

1、访问
http://localhost:5173/#/
http://localhost:5173/#/xxx
能显示对应页面。

2、小结
第1步：安装vue-router(v4)并创建路由实例，在main.js注册
第2步：编写路由规则{ path, component, children, meta, props, name, alias, redirect }
第3步：使用<router-view>显示匹配成功的页面组件，使用<router-link>做设计菜单导航

四、element-plus

1、安装

cnpm install element-plus

2、导入组件库

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

3、use一下

app.use(ElementPlus)

4、安装icon图标

cnpm install @element-plus/icons-vue

5、注册图标（总的main.ts）

// import Vue from 'vue' 在vue3中已经没有这个构造函数了
// 导入createApp工厂方法，用于创建vue实例
import { createApp } from 'vue'
// 导入全局样式
//import './style.css'
// 导入根组件
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// 如果您正在使用CDN引入，请删除下面一行。
import * as ElementPlusIconsVue from '@element-plus/icons-vue'//createApp(App).mount('#app')
const app = createApp(App)
// 注册element-plus-icon
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)
}// 注册路由
app.use(router)
app.use(ElementPlus)// 在vue3中，只能使用$mount挂载，已经淘汰了el选项
app.mount('#app')