简介

Vue-element-admin是一个基于Vue.js和Element UI构建的全功能的前端解决方案。它提供了各种示例页面和功能模块，帮助开发者快速搭建后台管理系统。

在使用Vue-element-admin开发项目时，我们经常需要添加路由来实现页面的切换，同时也需要修改页面的标题来提高用户体验。本篇博客将介绍如何在Vue-element-admin中添加路由，以及如何修改页面的标题。

添加路由

在Vue-element-admin中，路由的配置是通过src/router/index.js文件进行管理的。在这个文件中，我们可以找到一个名为constantRoutes的数组，这个数组中定义了一些基础的路由。

要添加一个新的路由，我们需要在constantRoutes数组中添加一个路由对象。每个路由对象包含path、name、component等属性，用于定义路由的路径、名称和对应的组件。

下面是添加一个新路由的示例代码：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

// 在这里添加新的路由对象
const constantRoutes = [
  {
    path: '/home',
    name: 'Home',
    component: () => import('@/views/home/index.vue'),
  },
  // ...
]

// 导出路由
export default new Router({
  routes: constantRoutes,
})

在上面的示例中，我们添加了一个名为Home的路由，它的路径是/home，对应的组件是@/views/home/index.vue。

除了在constantRoutes数组中添加路由对象，我们还需要在侧边栏菜单中添加对应的菜单项。在src/layout/components/Sidebar/index.vue文件中，我们可以找到侧边栏菜单的相关代码，通过添加一个新的菜单项，就可以将我们添加的路由链接到侧边栏菜单中。

<template>
  <div class="sidebar">
    <!-- 在这里添加新的菜单项 -->
    <el-menu-item index="home">
      <i class="el-icon-menu"></i>
      <span>Home</span>
    </el-menu-item>
    <!-- ... -->
  </div>
</template>

修改页面标题

在Vue-element-admin中，页面的标题是通过Vue Router的元信息（meta）来管理的。在constantRoutes数组中的每个路由对象中，我们可以定义一个名为meta的属性，用于设置页面标题。

下面是设置页面标题的示例代码：

const constantRoutes = [
  {
    path: '/home',
    name: 'Home',
    component: () => import('@/views/home/index.vue'),
    meta: {
      title: '首页', // 设置页面的标题
    },
  },
  // ...
]

在上面的示例中，我们设置了Home路由的页面标题为首页。

为了实现修改页面标题的功能，我们需要在路由导航守卫中监听路由的变化，并通过修改document.title来改变页面的标题。在src/permission.js文件中，我们可以找到路由导航守卫的相关代码。

import router from './router'

// 路由导航守卫
router.beforeEach((to, from, next) => {
  // 修改页面标题
  document.title = to.meta.title || '默认标题'
  next()
})

在上面的示例中，我们通过to.meta.title来获取路由对象的元信息中设置的页面标题，如果没有设置，则使用默认标题。

总结

通过上面的介绍，我们学习了如何在Vue-element-admin中添加路由，并通过修改路由的元信息来修改页面的标题。添加路由可以帮助我们实现页面的切换，提高用户操作的灵活性；修改页面标题可以增加用户体验，使用户更加清晰地知道当前所在页面。

希望本篇博客能够帮助到大家，如果有任何问题，欢迎交流讨论。

本文来自极简博客，作者：无尽追寻，转载请注明原文链接：Vue-element-admin如何添加路由以及如何修改title