Vue Element Admin 学习使用（五）路由挂载，侧边栏刷新当前页面，table

2024-02-23 10:15:57

前言

各位读者大家好，我是你们的老朋友了，今天我给大家带来的是Vue Element Admin 学习使用（五） ，在这篇文章中，我们将学习如何使用路由挂载，侧边栏刷新当前页面，以及如何使用table。

正文

路由挂载

在Vue Element Admin中，我们可以使用<router-view>组件来挂载路由组件。<router-view>组件是一个占位符，它会自动渲染当前路由所对应的组件。

例如，在以下代码中，我们使用了<router-view>组件来挂载Home组件和About组件：

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    component: Home
  },
  {
    path: '/about',
    component: About
  }
]

const router = new VueRouter({
  routes
})

new Vue({
  router
}).$mount('#app')
</script>

当我们访问/路由时，Home组件就会被渲染到<router-view>组件中。当我们访问/about路由时，About组件就会被渲染到<router-view>组件中。

侧边栏刷新当前页面

在Vue Element Admin中，我们可以通过在侧边栏的菜单项上添加reload属性来刷新当前页面。例如，在以下代码中，我们添加了reload属性到Home菜单项上：

<template>
  <div id="app">
    <el-aside>
      <el-menu>
        <el-menu-item index="/">Home</el-menu-item>
        <el-menu-item index="/about">About</el-menu-item>
      </el-menu>
    </el-aside>
    <router-view />
  </div>
</template>

<script>
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    component: Home
  },
  {
    path: '/about',
    component: About
  }
]

const router = new VueRouter({
  routes
})

new Vue({
  router
}).$mount('#app')
</script>

当我们点击Home菜单项时，当前页面就会被刷新。

table

在Vue Element Admin中，我们可以使用el-table组件来创建表格。el-table组件是一个功能丰富的表格组件，它支持多种功能，包括分页、排序、过滤等。

例如，在以下代码中，我们使用el-table组件创建了一个简单的表格：

<template>
  <div id="app">
    <el-table :data="tableData">
      <el-table-column prop="name" label="Name"></el-table-column>
      <el-table-column prop="age" label="Age"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import Vue from 'vue'
import { ElTable, ElTableColumn } from 'element-ui'

Vue.use(ElTable)
Vue.use(ElTableColumn)

const app = new Vue({
  el: '#app',
  data() {
    return {
      tableData: [
        {
          name: 'John',
          age: 30
        },
        {
          name: 'Mary',
          age: 25
        },
        {
          name: 'Bob',
          age: 40
        }
      ]
    }
  }
})
</script>