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

这篇文章主要介绍了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
 }
 });
 
 }

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