黑马大事件学习-16 （前端主页面）

效果展示

主页面搭建

在资料上复制源码

配置路径

html 复制代码

<script setup>
  import LoginVue from '@/views/Login.vue'
  import LayoutVue from '@/views/Layout.vue'; 
</script>

<template>
  <LoginVue/>
  <LayoutVue/>
</template>

<style scoped></style>

测试

路由

路由决定从起点到终点的进程

在前端路由指的是根据不同的访问路径，展示不同组件的路程

Vue Router是Vue.js的官方路程

安装Vue Router

安装

创建路由器并导出

javascript 复制代码

import { createRouter,createWebHistory} from "vue-router";
// 导入组件
 import LoginVue from '@/views/Login.vue'
import LayoutVue from '@/views/Layout.vue'; 

//定义路由关系
const routes = [
    {path:'/login',component:LoginVue},
    {path:'/',component:LayoutVue}
]

//创建路由器
const router = createRouter({
    history:createWebHistory(),
    routes:routes
})

//导出路由
export default router;

在应用实例上使用

main.js

javascript 复制代码

import router from '@/router'
app.use(router)

声明router-view标签，展示组件内容

app.vue

html 复制代码

<script setup>

</script>

<template>
  <router-view></router-view>
</template>

<style scoped></style>

javascript 复制代码

//调用后台接口完成登录
import {useRouter} from 'vue-router'
const router = useRouter()
const login = async()=>{
    let result=await userLoginService(registerData.value);
    // alert(result.msg ? result.msg:'登录成功');
    ElMessage.success(result.msg ? result.msg:'登录成功');
    // 跳转到首页 路由跳转
    router.push('/')
}

子路由

复制资料总提供好的五个组件

配置子路由

javascript 复制代码

import { createRouter,createWebHistory} from "vue-router";
// 导入组件
 import LoginVue from '@/views/Login.vue'
import LayoutVue from '@/views/Layout.vue'; 
import ArticleCategoryVue from '@/views/article/ArticleCategory.vue'
import ArticleManageVue from '@/views/article/ArticleManage.vue'
import UserAvatarVue from '@/views/user/UserAvatar.vue'
import UserInfoVue from '@/views/user/UserInfo.vue'
import UserResetPasswordVue from '@/views/user/UserResetPassword.vue'

//定义路由关系
const routes = [
        {path:'/login',component:LoginVue},
            {path:'/',component:LayoutVue,children:[
            {path:'/article/category',component:ArticleCategoryVue},
            {path:'/article/manage',component:ArticleManageVue},
            {path:'/user/avatar',component:UserAvatarVue},
            {path:'/user/info',component:UserInfoVue},
            {path:'/user/resetPassword',component:UserResetPasswordVue}
        ]
    }
]

//创建路由器
const router = createRouter({
    history:createWebHistory(),
    routes:routes
})

//导出路由
export default router;

声明router-view标签

Layout.vue

html 复制代码

              <!-- <div style="width: 1290px; height: 570px;border: 1px solid red;">
                    内容展示区
                </div> -->
                <router-view></router-view>

为菜单项el-menu-item设置index属性，设置点击后的路由路径

javascript 复制代码

 <el-menu active-text-color="#ffd04b" background-color="#232323"  text-color="#fff"
                router>
                <el-menu-item index="/article/category">
                    <el-icon>
                        <Management />
                    </el-icon>
                    <span>文章分类</span>
                </el-menu-item>
                <el-menu-item index="/article/manage">
                    <el-icon>
                        <Promotion />
                    </el-icon>
                    <span>文章管理</span>
                </el-menu-item>
                <el-sub-menu >
                    <template #title>
                        <el-icon>
                            <UserFilled />
                        </el-icon>
                        <span>个人中心</span>
                    </template>
                    <el-menu-item index="/user/info">
                        <el-icon>
                            <User />
                        </el-icon>
                        <span>基本资料</span>
                    </el-menu-item>
                    <el-menu-item index="/user/avatar">
                        <el-icon>
                            <Crop />
                        </el-icon>
                        <span>更换头像</span>
                    </el-menu-item>
                    <el-menu-item index="/user/resetPassword">
                        <el-icon>
                            <EditPen />
                        </el-icon>
                        <span>重置密码</span>
                    </el-menu-item>
                </el-sub-menu>
            </el-menu>

重定向

javascript 复制代码

const routes = [
        {path:'/login',component:LoginVue},
            {path:'/',component:LayoutVue,redirect:'/article/manage',children:[
            {path:'/article/category',component:ArticleCategoryVue},
            {path:'/article/manage',component:ArticleManageVue},
            {path:'/user/avatar',component:UserAvatarVue},
            {path:'/user/info',component:UserInfoVue},
            {path:'/user/resetPassword',component:UserResetPasswordVue}
        ]
    }
]