vue新建项目并配置标准路由过程解析

import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/ponents/HelloWorld'


import Home from '@/ponents/layout/Home'
import showuser from '@/ponents/t_dom_owner_user/showuser'
import addusersfromother from '@/ponents/t_dom_owner_user/addusersfromother'

import showresT from '@/ponents/t_dom_owner_resT/showresT'
Vue.use(Router)
export default new Router({
  // routes: [
  //   {
  //     path: '/',
  //     name: 'Login',
  //     ponent: Login
  //   }
  // ]
  
    routes: [
      
    { 
      path: '/', 
      name: 'Home', 
      ponent: Home ,
      children: [
        {
         path: '/showuser',
         name: 'showuser',
         ponent: showuser,
        },
        { 
          path: '/showresT', 
          name: 'showresT', 
          ponent: showresT 
        }]
      
    }, 
    
    { 
      path: '/addusersfromother', 
      name: 'addusersfromother', 
      ponent: addusersfromother 
    }, 
   
  ]
})

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')

<template>
 <div id="app">
  <!--<img alt="Vue logo" src="./assets/logo.png">-->
  <!--<HelloWorld msg="Wele to Your Vue.js App"/>-->
  <!--<home></home>-->
  <router-view></router-view>
 </div>
</template>

<script>
// import HelloWorld from './ponents/HelloWorld.vue'
//import Home from "./ponents/layout/Home";
export default {
 name: "app",
 ponents: {
  // HelloWorld
  //Home
 },

};
</script>

<style>
#app {
 width: 100%;
 height: 100%;
}
</style>

path: '/', 
name: 'Home', 
ponent: Home ,

<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>
    <el-col :span="24" class="content-wrapper">
     <transition name="fade" mode="out-in">
      <router-view></router-view>
     </transition>
    </el-col>
   </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
    }
   });
    
  }