vue中router-view的简单使用

路由配置：
{
    path: '/adminDatabase',//管理端--其他资源配置--数据库管理
    name: 'adminDatabase',
    component: () => import('@/components/manage/database/index'),
    redirect:'/tableData',
    children: [
      {
        path: '/tableData',//管理端--其他资源配置--新增数据库
        name: 'tableData',
        component: () => import('@/components/manage/database/components/index'),
      },
      {
        path: '/bankHistory',//管理端--其他资源配置--新增行史研究
        name: 'bankHistory',
        component: () => import('@/components/manage/database/bank/history'),
      },
      {
        path: '/amdinAbout',//管理端--其他资源配置--关于我们
        name: 'amdinAbout',
        component: () => import('@/components/manage/database/about/index'),
      },
      {
        path: '/adminMagazine',//管理端--其他资源配置--杂志
        name: 'adminMagazine',
        component: () => import('@/components/manage/database/magazine/index')
      },
      {
        path: '/adminmediaReport',//管理端--其他资源配置--媒体报道
        name: 'adminmediaReport',
        component: () => import('@/components/manage/database/mediaReport/index')
      },
      {
        path: '/adminDoctor',//管理端--其他资源配置--博士战后工作
        name: 'adminDoctor',
        component: () => import('@/components/manage/database/doctor/index')
      },
    ]
  },

<!--文件路径：components/manage/database/index -->
<template>
    <div>
        <home-top></home-top>
        <a-row style="margin-top:30px;">
            <a-col :span="15" style="margin-left: 20%;">
                <span class="seats">当前位置：</span>
                <el-breadcrumb separator=">" class="el_breadcrumb">
                    <el-breadcrumb-item :to="{}">首页</el-breadcrumb-item>
                    <el-breadcrumb-item :to="{}">其他资源配置</el-breadcrumb-item>
                    <el-breadcrumb-item :to="{}">数据库管理</el-breadcrumb-item>
                </el-breadcrumb>
            </a-col>
        </a-row>
        <div class="database">
            <div class="column">
                <ul>
                    <li style="background-color:#636363;color:#FFF;">资源模块名称</li>
                    <li v-for="(item,index) in columnList" :key="index" @contextmenu.prevent="rightClick">
                        <router-link :to="item.path">{{item.name}}</router-link>
                    </li>
                </ul>
            </div>
            <router-view></router-view>
        </div>
    </div>
</template>
<script>
import homeTop from '../homePage/components/home-top'
export default{
    components:{
        homeTop,
    },
    data(){
        return{
            current:0,
            columnList:[
                {path:'/tableData',name:'数据库管理'},
                {path:'/bankHistory',name:'行史研究管理'},
                {path:'/amdinAbout',name:'关于我们'},
                {path:'/adminMagazine',name:'杂志'},
                {path:'/adminmediaReport',name:'媒体报道'},
                {path:'/adminDoctor',name:'博士后工作站'},
            ],
        }
    },
    methods:{
        rightClick(){
        },
    }
}

<!--文件路径：components/manage/database/components/index -->
<template>
    <div>
        <div class="rightData">
            <el-button size="mini" class="el_button" @click="goaddDatabase">新增数据库</el-button>
            <div>
                <el-table
                    :header-cell-style="{background:'black',color:'#FFF;'}"
                    size="mini"
                    :data="tableData"
                    border>
                    <el-table-column
                    prop="date"
                    label="数据库名称"
                    align="center">
                    </el-table-column>
                    <el-table-column
                    prop="name"
                    label="创建人"
                    align="center">
                    </el-table-column>
                    <el-table-column
                    align="center"
                    prop="province"
                    label="创建时间">
                    </el-table-column>
                    <el-table-column
                    align="center"
                    label="操作">
                    <span class="table_span" @click="goaddDatabase">修改</span>
                    <span class="table_span">删除</span>
                    </el-table-column>
                </el-table>
            </div>
            <div style="margin-top:20px;margin-left:150px;">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage4"
                  :page-sizes="[100, 200, 300, 400]"
                  :page-size="100"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="400">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
export default{
    data(){
        return{
            tableData: [{
                index:"1",
                date: '2016-05-02',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市',
                zip: 200333
                }, {
                index:"1",
                date: '2016-05-04',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市',
                zip: 200333
                }, {
                index:"1",
                date: '2016-05-01',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市',
                zip: 200333
                }, {
                index:"1",
                date: '2016-05-03',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市',
                zip: 200333
                },{
                index:"1",
                date: '2016-05-03',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市',
                zip: 200333
                },
                {
                index:"1",
                date: '2016-05-03',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市',
                zip: 200333
                },
                {
                index:"1",
                date: '2016-05-03',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市',
                zip: 200333
                },
                {
                index:"1",
                date: '2016-05-03',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市',
                zip: 200333
                },
                {
                index:"1",
                date: '2016-05-03',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市',
                zip: 200333
                },
                {
                index:"1",
                date: '2016-05-03',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市',
                zip: 200333
                }
            ],
            currentPage4: 4,
        }
    },
    methods: {
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },
        goaddDatabase(){
            this.$router.push({ name: 'addDatabase'});
        },
    }
}
</script>

效果如下：