Vue3 + Element UI搭建后台管理系统

项目搭建

//搭建Vue3项目
yarn create vite admin --template vue


//安装依赖
yarn 
yarn add sass -D 
yarn add vue-router 
yarn add element-plus 
yarn add pinia 
//运行
yarn dev 

路由配置

安装vue-router

yarn add vue-router

创建router文件

在src目录下创建router文件夹，存放index.js文件配置路由

配置路由文件

在src/router/index.js 文件中

//导入路由
import { createRouter, createWebHashHistory } from 'vue-router'

//导入模块
import Login from '@/pages/login/index.vue'
import Layout from '@/pages/layout/index.vue'

//创建routes实例对象
const routes = [
    {
        path: '/',
        redirect: '/login'
    },
    {
        path: '/login',
        component: Login
    },
    // home
    {
        path: '/layout',
        component: Layout,
        redirect: '/home',
        children: [
            {
                path: '/home',
                component: () => import('@/pages/home/index.vue')
            }
        ]
    },
]


const router = createRouter({
    history: createWebHashHistory(),
    routes
})

//暴露出去
export default router

在main.js文件引入并使用

import { createApp } from 'vue'
import App from './App.vue'
import router from '@/router'
​
const app = createApp(App);
//全局注入路由配置 类似 react的 Provider注入组件
app.use(router)  
​
app.mount('#app')

最后在子页面占位使用

<template>
  <div>
    //占位符 类似于React中的outlet
    <router-view></router-view>
  </div>
</template>

<script setup>
</script>

<style lang="scss" scoped>
</style>

使用

//跳转页面
const  router = useRouter() 
router.push('/home')

//取值 
const route = useRoute()
console.log(route.matches)   //当前路由的所有匹配路由