This is my project hierarchy.

Tree menu

Today is based on the last improvement, access to background data, dynamic display of the tree menu, and then the menu can click to jump to different pages.

The data used the code of the last SSH tree menu and Book additions, deletions and modifications.

vue+element's el-menu component realizes routing jump and current item setting. To achieve routing jump, first add router attribute to the el-menu tag, and then click el-menu-item to realize routing jump by setting the index attribute in each el-menu-item tag. For example:

<el-menu router :default-active="$route.path">
        <el-menu-item index="/company/userManager">user management</el-menu-item>

Dynamic Tree Menu Code, LeftNav.vue

<template>
	<el-menu router :default-active="$route.path" default-active="2" class="el-menu-vertical-demo" background-color="#334157" text-color="#fff"
	 active-text-color="#ffd04b" :collapse="collapsed">
		<!-- <el-menu default-active="2" :collapse="collapsed" collapse-transition router :default-active="$route.path" unique-opened class="el-menu-vertical-demo" background-color="#334157" text-color="#fff" active-text-color="#ffd04b"> -->
		<div class="logobox">
			<img class="logoimg" src="../assets/img/logo.png" alt="">
		</div>
		<!-- Be careful: index Is a mandatory attribute  1,index Can be regarded as ID,That is to say, it is unique.
					2,It represents the jump path of routing-->
		<el-submenu :index="'id_'+m.treeNodeId" v-for="m in menus">
			<template slot="title">
				<i :class="m.icon"></i>
				<span>{{m.treeNodeName}}</span>
			</template>
			<el-menu-item :key="'id_'+m2.treeNodeId" :index="m2.url" v-for="m2 in m.children">
				<template slot="title">
					<i :class="m2.icon"></i>
					<span>{{m2.treeNodeName}}</span>
				</template>
			</el-menu-item>
		</el-submenu>
	</el-menu>
</template>
<script>
	export default {
		data() {
			return {
				collapsed: false,
				menus: []

			};
		},
		created() {
			// Monitoring events
			this.$root.Bus.$on("collapsed-side", (v) => {
				this.collapsed = v;
			});
			let url = this.axios.urls.SYSTEM_MENU_TREE;
			this.axios.post(url, {}).then((response) => {
				// console.log(response)
				this.menus = response.data.result
			}).catch((response) => {
				console.log(response)
			});
		}
	}
</script>
<style>
	.el-menu-vertical-demo:not(.el-menu--collapse) {
		width: 240px;
		min-height: 400px;
	}

	.el-menu-vertical-demo:not(.el-menu--collapse) {
		border: none;
		text-align: left;
	}

	.el-menu-item-group__title {
		padding: 0px;
	}

	.el-menu-bg {
		background-color: #1f2d3d !important;
	}

	.el-menu {
		border: none;
	}

	.logobox {
		height: 40px;
		line-height: 40px;
		color: #9d9d9d;
		font-size: 20px;
		text-align: center;
		padding: 20px 0px;
	}

	.logoimg {
		height: 40px;
	}
</style>

Data tables and paging

Background returns data and foreground inserts into components
Article.vue

<template>
	<div>
		<!-- Search and screen -->
		<el-form :inline="true" :model="formInline" class="user-search">
			<el-form-item label="Search:">
				<el-input size="small" v-model="formInline.title" placeholder="Please enter the title of the article."></el-input>
			</el-form-item>
			<el-form-item>
				<el-button size="small" type="primary" icon="el-icon-search" @click="search">search</el-button>
				<el-button size="small" type="primary" icon="el-icon-plus" @click="handleEdit()">Add to</el-button>
			</el-form-item>
		</el-form>
		<!--list-->
		<el-table size="small" :data="listData" border element-loading-text="Desperate Loading" style="width: 100%;">
			<el-table-column sortable prop="id" label="ID" width="300">
			</el-table-column>
			<el-table-column sortable prop="title" label="Article title" width="300">
			</el-table-column>
			<el-table-column sortable prop="body" label="Article content" width="300">
			</el-table-column>
			<el-table-column align="center" label="operation" min-width="300">
				<template slot-scope="scope">
					<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">edit</el-button>
					<el-button size="mini" type="danger" @click="deleteUser(scope.$index, scope.row)">delete</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- Paging bar -->
		<el-pagination style="margin-top: 20px;" @size-change="handleSizeChange" @current-change="handleCurrentChange"
		 :current-page="formInline.page" :page-sizes="[10, 20, 30, 50]" :page-size="formInline.rows" layout="total, sizes, prev, pager, next, jumper"
		 :total="pageBean.total">
		</el-pagination>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				listData: [],
				pageBean:{
					total:0
				},
				formInline: {	
					title: '',
					page:1,
					rows:10,
					total:0
				},
			};
		},
		methods: {
			search() {
				this.doSearch(this.formInline)
			},
			doSearch(params) {
				let url = this.axios.urls.SYSTEM_ARTICLE_LIST;
				this.axios.post(url, params).then((response) => {
					this.listData = response.data.result;
					this.pageBean=response.data.pageBean.total;
					console.log(response)
				}).catch((response) => {
					console.log(response)
				});
			},
			handleSizeChange(rows) {
				console.log("Page size triggers when it happens in 100 years!!"+rows)
				this.formInline.page = 1;
				this.formInline.rows = rows;
				this.search();
			},
			handleCurrentChange(page) {
				console.log("The current page size triggers when it occurs in the hundred years!!"+page)
				this.formInline.page = page;
				this.search();
			}
		},
		created() {
			this.doSearch({})
		}
	}
</script>

<style>

</style>

Article.vue is then a self-assembly of AppMain, so it is mounted on router's AppMain
router's index.js

import Vue from 'vue'
import Router from 'vue-router'
import login from '@/views/login'
import reg from '@/views/reg'
import AppMain from '@/components/AppMain'
import Articles from '@/views/sys/Articles'

Vue.use(Router) 

export default new Router({
	routes: [{
		path: '/',
		name: 'login',
		component: login
	},
	{
		path: '/login',
		name: 'login',
		component: login
	},
	{
		path: '/reg',
		name: 'reg',
		component: reg
	},
	{
		path: '/AppMain',
		name: 'AppMain',
		component: AppMain,
		children:[
			{
				path: '/sys/Articles',
				name: 'Articles',
				component: Articles
			}
		]
	}]
})

The final effect is as follows