当前位置 主页 > 网站技术 > 代码类 > 最大化 缩小

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

    栏目:代码类 时间:2019-12-09 12:09

    这篇文章主要介绍了vue新建项目并配置标准路由过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

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

    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 >
      <!--<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.其它应用路由的界面

    比如showowner.vue

    <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>
    
    下一篇:没有了