elementui路由

使用Element UI与Vue Router集成

Element UI是一个基于Vue.js的组件库，与Vue Router可以无缝集成。通过Vue Router管理路由，结合Element UI的导航组件（如el-menu）实现页面切换。

安装Vue Router：

npm install vue-router

配置基本路由

在src/router/index.js中定义路由规则：

import Vue from 'vue'
import Router from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

Vue.use(Router)

export default new Router({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})

结合Element UI菜单

在组件中使用el-menu实现导航：

<template>
  <el-menu 
    mode="horizontal"
    :router="true"
    :default-active="$route.path">
    <el-menu-item index="/">首页</el-menu-item>
    <el-menu-item index="/about">关于</el-menu-item>
  </el-menu>
</template>

动态路由与权限控制

结合Vue Router的动态路由功能实现权限管理：

// 动态添加路由
router.addRoutes([
  { path: '/admin', component: Admin, meta: { requiresAuth: true } }
])

// 路由守卫
router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // 检查权限逻辑
  } else {
    next()
  }
})

嵌套路由布局

使用Element UI的布局组件与嵌套路由结合：

<template>
  <el-container>
    <el-aside width="200px">
      <el-menu router>
        <el-submenu index="1">
          <template slot="title">用户管理</template>
          <el-menu-item index="/users/list">用户列表</el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>
    <el-main>
      <router-view></router-view>
    </el-main>
  </el-container>
</template>

路由懒加载优化

使用动态导入语法实现路由懒加载：

const UserDetails = () => import('./views/UserDetails.vue')

routes: [
  { path: '/user/:id', component: UserDetails }
]

路由过渡效果

结合Element UI的动画组件实现页面过渡：

<template>
  <el-collapse-transition>
    <router-view></router-view>
  </el-collapse-transition>
</template>