ElementUI组件库的使用

最新推荐文章于 2024-08-03 00:42:30 发布

原创

最新推荐文章于 2024-08-03 00:42:30 发布 · 631 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #vue.js #前端

本文详细介绍了如何在Vue.js项目中结合ElementUI进行组件库的使用，包括设置路由、新建视图和路由配置、参数传递及重定向、指定路由模式、处理404页面以及使用axios进行异步请求。通过实例演示了路由嵌套、参数传递、页面跳转等关键步骤，帮助开发者掌握前端开发中的常见操作。

2.修改main.js，增加router、ElementUI

import Vue from 'vue'
import App from "./App";

import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI);


new Vue({
  el: '#app',
  router,
  render: h => h(App) //ElementUI
});

3.新建视图Main.vue、Confirm.vue

<template>
    <h1>首页</h1>
</template>

<script>
    export default {
        name: "Main"
    }
</script>

<style scoped>

</style>

<template>
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="审批人">
      <el-input v-model="formInline.user" placeholder="审批人"></el-input>
    </el-form-item>
    <el-form-item label="活动区域">
      <el-select v-model="formInline.region" placeholder="活动区域">
        <el-option label="区域一" value="shanghai"></el-option>
        <el-option label="区域二" value="beijing"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
    export default {
        data() {
            return {
                formInline: {
                    user: '',
                    region: ''
                }
            }
        },
        methods: {
            onSubmit() {
                console.log('submit!');
            }
        }
    }
</script>

4.新建路由配置index.js

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

import Main from '../views/Main'
import Confirm from '../views/Confirm'
Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/main',
      component: Main
    },
    {
      path: '/confirm',
      component: Confirm
    }
  ]
})

5.修改展现层App.vue

<template>
  <div id="app">
    <router-link to="/main">首页</router-link>
    <router-link to="/confirm">ElementUI测试</router-link>
    <router-view></router-view>
  </div>
</template>

<script>


export default {
  name: 'App'
}
</script>

6.npm run dev启动测试

--------------------------------------------------------------------------------------------------------

如何使用路由嵌套：

1.增加子路由视图层/views/user/List.vue、/views/user/Profile.vue

<template>
    <h1>用户列表</h1>
</template>

<script>
    export default {
        name: "List"
    }
</script>

<style scoped>

</style>

<template>
    <h1>个人信息</h1>
</template>

<script>
    export default {
        name: "Profile"
    }
</script>

<style scoped>

</style>

2.修改index.js,增加子路由配置

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

import Main from '../views/Main'
import Confirm from '../views/Confirm'

import List from '../views/user/List'
import Profile from '../views/user/Profile'

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/main',
      component: Main,
      children:

最低0.47元/天解锁文章