配置路由所有用到的地方总共四步或者说四处

1.index.js（src--router--index.js）

父子界面嵌套---需要配置子路由

import Vue from 'vue'

import Router from 'vue-router'

// import HelloWorld from '@/components/HelloWorld'

import Home from '@/components/layout/Home'

import showuser from '@/components/t_dom_owner_user/showuser'

import addusersfromother from '@/components/t_dom_owner_user/addusersfromother'

import showresT from '@/components/t_dom_owner_resT/showresT'

Vue.use(Router)

export default new Router({

    // routes: [

    //     {

    //         path: '/',

    //         name: 'Login',

    //         component: Login

    //     }

    // ]

        routes: [

        {

            path: '/',

            name: 'Home',

            component: Home ,

            children: [

                {

                  path: '/showuser',

                  name: 'showuser',

                  component: showuser,

                },

                {

                    path: '/showresT',

                    name: 'showresT',

                    component: showresT

                }]

        },  

        {

            path: '/addusersfromother',

            name: 'addusersfromother',

            component: addusersfromother

        }, 

    ]

})

2.main.js(src根目录下)

import Vue from 'vue'

import App from './App.vue'

import ElementUI from  'element-ui';

import router from './router'

import 'element-ui/lib/theme-chalk/index.css';

import '../public/css/main.css'

import store from '../store'

Vue.config.productionTip = false;

Vue.use(ElementUI);

new Vue({

  router,

  render: h => h(App),

  store,

}).$mount('#app')

3.App.vue

<template>

  <div id="app">

    <!--<img alt="Vue logo" src="./assets/logo.png">-->

    <!--<HelloWorld msg="Welcome to Your Vue.js App"/>-->

    <!--<home></home>-->

    <router-view></router-view>

  </div>

</template>

<script>

// import HelloWorld from './components/HelloWorld.vue'

//import Home from "./components/layout/Home";

export default {

  name: "app",

  components: {

    // HelloWorld

    //Home

  },

};

</script>

<style>

#app {

  width: 100%;

  height: 100%;

}

</style>

注意App.vue里的<router-view></router-view>必须配置，这意味着项目运行起始的路由界面，

即对应index.js里配置的根路径http://localhost:8080/#，作为app.vue的入口页面

path: '/',

name: 'Home',

component: Home ,

4.其它应用路由的界面

<el-main>

        <el-col :span="24" class="content-wrapper">

          <transition name="fade" mode="out-in">

            <router-view></router-view>

          </transition>

        </el-col>

      </el-main>

<template>

  <div>

    <!-- <el-tree :data="data" @node-click="handleNodeClick"></el-tree> -->

    <el-container>

      <el-aside width="200px">

        <el-tree

          :data="data"

          node-key="id"

          :props="defaultProps"

          :expand-on-click-node="false"

          :highlight-current="true"

          @node-click="handleNodeClick"

        >

          <span class="custom-tree-node" slot-scope="{ node, data }">

            <span>{{ data.data.ownerName}}</span>

            <span>

              <el-button type="text" size="mini">

                <i class="el-icon-edit"></i>

              </el-button>

              <el-button type="text" size="mini">

                <i class="el-icon-plus"></i>

              </el-button>

              <el-button type="text" size="mini">

                <i class="el-icon-delete"></i>

              </el-button>

            </span>

          </span>

        </el-tree>

      </el-aside>

      <el-main>

        <el-col :span="24" class="content-wrapper">

          <transition name="fade" mode="out-in">

            <router-view></router-view>

          </transition>

        </el-col>

      </el-main>

    </el-container>

  </div>

</template>

其中的嵌入式布局el-main里配置<router-view></router-view>，意味着在本界面showowner.vue触发路由将要跳转的位置，即要跳转到el-main处

 　　　<el-main>

        <el-col :span="24" class="content-wrapper">

          <transition name="fade" mode="out-in">

            <router-view></router-view>

          </transition>

        </el-col>

      </el-main>

然后是跳转路由写法，跳转到的界面是pathVariable，界面pathVariable就会显示在上面配置的el-main处

handleNodeClick(data) {

      console.log(data);

      //每次点击结点都要初始化ownerId

      this.domId = data.data.domId;

      this.ownerId = data.data.ownerId;

      this.varify();

      this.$router.push({

        path: this.pathVariable,

        query: {

          domId: this.domId,

          ownerId: this.ownerId

        }

      });

    }

vue新建项目之标准路由配置--父子嵌套界面的相关教程结束。