学习进度条

今日所花时间：一小时
今日代码量：100行
博客量：一篇
了解到的知识点：路由

路由

路由：决定从起点到终点的路径的进程
在前端工程中路由指的是根据不同的访问路径，展示不同的组件内容
例如：/login访问登录界面 /访问主界面

Vue Router

Vue Router是Vue.js的官方路由
使用步骤：
安装： 输入npm install vue-router@4
在src/router/index.js中创建路由器，并导出
在vue应用实例中使用vue_router
声明router_view标签。展示组件内容

具体操作：

在src下创建router文件夹创建index.js文件
书写以下代码：

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

//导入组件
import LoginVue from '@/views/Login.vue'
import layoutVue from './views/layout.vue';

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

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

//导出路由
export default router

在main.js中写入：

import router from '@/router'

app.use(router);

修改App.vue中的代码为
声明router-view标签。展示组件内容

<script setup>

</script>

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

<style scoped>

</style>

子路由(children)

步骤：
配置子路由（在Layout.vue中配置）
声明router-view标签
为菜单项el-menu-item设置index属性，设置点击后的路由路径
具体操作：
修改index.js的部分代码

//导入组件
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 }
    ]
  },
]

在Layout.vue(中间区域)中声明

<router-view></router-view>

在Layout.vue的菜单栏中的el-menu-item设置index属性，设置点击之后路由路径

<el-menu-item index="/article/category">

配置重定向：(index.js文件中添加redirect)

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 }
    ]