欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-07-06 18:45:58
这篇文章主要介绍了vue新建项目并配置标准路由过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 配置路由所有用到的地方总共四...

这篇文章主要介绍了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 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.其它应用路由的界面

比如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>

其中的嵌入式布局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
    }
   });
    
  }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。