vue页面

views > index.vue

<template>
    <div>
        gsdfghsdgfhdsgfhjs
        <router-view></router-view>
    </div>
</template>
<script>
export default {
    
}
</script>
<style>

</style>

router.js

import Vue from 'vue'; //导入vue
import Router from 'vue-router'; /* 导入路由 */
import Login from '@/views/HelloWorld.vue'; /* 导入其他组件 */
import Main from '@/views/HelloWorld copy.vue'; 
import common from './common.js'
Vue.use(Router)
/* 定义组件路由 */
var router = new Router({
	routes: [{
			path: '/', //ip:端口访问时 默认显示组件
            component: () => import('@/views/Index.vue'),
            children: [
                ...common,
            ]
		},
		{
			path: '/login', //组件地址
			component: Login
		},
		{
			path: '/main',
			component: Main
		}
 
	]
});
export default router

common.js

const common = [
    {
        path: '/helloWorld' /** 项目报销 */,
        name: 'helloWorldChild',
        component: () => import('@/views/HelloWorld.vue'),
      },
]

export default common

helloWord.vue 修改

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <el-form class="white-box no-padding-bottom" label-suffix=":" :inline="true" :model="dataForm" @submit.native.prevent @keyup.enter.native="getDataList()">
      <el-form-item label="企业名称" prop="agencyName">
        <el-input v-model="dataForm.agencyName" placeholder="请输入企业名称" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getBanner()">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="id"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="imgUrl"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="imgUrl"
        label="地址">
      </el-table-column>
    </el-table>
    <el-pagination
      :total="totalPage"
      :page="pageIndex"
      :limit="pageSize"
      @size-change="getBanner"
      @current-change="getBanner"
    />
  </div>
</template>

<script>
import { getRoles, getBannerList } from '@/api/api'
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      dataForm: {},
      dataList: [],
      tableData: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
    }
  },
  created() {
    console.log(12312);
    this.getDataList();
    this.getBanner();
  },
  methods: {
    // 获取数据列表
    getDataList() {
      getRoles({
        'page': this.pageIndex,
        'limit': this.pageSize,
      }).then((data) => {
        if (data && data.code === 0) {
          this.dataList = data.page.list
          this.totalPage = data.page.totalCount
        } else {
          this.dataList = []
          this.totalPage = 0
        }
      })
    },
    async getBanner(){
      var res = await getBannerList({ page: this.pageIndex, limit: 10 });
      console.log('res', res);
      this.tableData = res.data.data;
      this.totalPage = 100;
      console.log('this.tableData', this.tableData);
    }

    // try {
    //   let res = await this.$api.data_getDepartOptions()
    //   this.loading = false
    //   this.departOptions = res.result
    // } catch (e) {
    //   this.loading = false
    // }
  },
  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>