vue新建项目并配置标准路由过程解析
时间：2021-04-11 08:53: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
}
});
}
