This article mainly introduces the analysis of the new Vue project and configuring standard routing process. The example code is introduced in this article in detail, which has certain reference value for everyone's learning or work. Friends who need it can refer to it.
Configuring all routes in all places used
（）
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'
(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
},
]
})
(under the root directory of src)
import Vue from 'vue'
import App from './'
import ElementUI from 'element-ui';
import router from './router'
import 'element-ui/lib/theme-chalk/';
import '../public/css/'
import store from '../store'
= false;
(ElementUI);
new Vue({
router,
render: h => h(App),
store,
}).$mount('#app')
<template>
<div >
<!--<img alt="Vue logo" src="./assets/">-->
<!--<HelloWorld msg="Welcome to Your App"/>-->
<!--<home></home>-->
<router-view></router-view>
</div>
</template>
<script>
// import HelloWorld from './components/'
//import Home from "./components/layout/Home";
export default {
name: "app",
components: {
// HelloWorld
//Home
},
};
</script>
<style>
#app {
width: 100%;
height: 100%;
}
</style>
Note that the <router-view></router-view> must be configured, which means the routing interface at the beginning of the project operation.
That is, the corresponding root path http://localhost:8080/# is used as the entry page
path: '/', name: 'Home', component: Home ,
4. Interface of other application routing
for example
<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>{{ }}</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>
The embedded layout el-main configuration is configured with <router-view></router-view>, which means that the location where the route will be redirected on this interface is triggered, that is, it must jump to the 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>
Then there is the jump route writing method. The jump to the interface is pathVariable, and the interface pathVariable will be displayed at the el-main configured above.
handleNodeClick(data) {
(data);
//Every time you click on the node, ownerId must be initialized. = ;
= ;
();
this.$({
path: ,
query: {
domId: ,
ownerId:
}
});
}
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.