Spring Boot 笔记 025 主界面

1.1 路由搭建

1.1.1 安装vue router

npm install vue-router@4

1.1.2 在src/router/index.js中创建路由器，并导出

import { createRouter, createWebHistory } from 'vue-router'

//导入组件
import LoginVue from '@/views/Login.vue'
import LayoutVue from '@/views/LayoutGeji.vue'


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

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

//导出路由
export default router

1.1.3 在vue应用实例中使用vue-router

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

1.1 自动跳转

import { useRouter } from 'vue-router'

const router = useRouter()

const login =async ()=>{
    //调用接口,完成登录
   let result =  await userLoginService(registerData.value);
 
   ElMessage.success(result.msg ? result.msg : '登录成功')

   //跳转到首页 路由完成跳转
   router.push('/')
}

1.2 子路由

1.2.1 配置子路由

import { createRouter, createWebHistory } from 'vue-router'

//导入组件
import LoginVue from '@/views/Login.vue'
import LayoutVue from '@/views/LayoutGeji.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,redirect:'/article/manage', children: [
            { path: '/article/category', component: ArticleCategoryVue },
            { path: '/article/manage', component: ArticleManageVue },
            { path: '/user/info', component: UserInfoVue },
            { path: '/user/avatar', component: UserAvatarVue },
            { path: '/user/resetPassword', component: UserResetPasswordVue }
        ]
    }
]

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

//导出路由
export default router

1.2.2 声明router-view

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

```html





```