如下：
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset = "UTF-8">
<title>Come on</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<!-- 先引入 vue js -->
<script src="./js/vue.min.js"></script>
<!-- 引入 router js -->
<script src="./js/vue-router.js"></script>
<!-- 引入 element-ui -->
<link rel="stylesheet" href="./css/element_ui.css">
<!-- 引入 element - ui JS -->
<script src="./js/element_ui.js"></script>
</head>
<body>
<div id = "app">
<!-- 渲染的位置 -->
<router-view></router-view>
</div>
</body>
<script>
// 主组件
const Main = {
template: `<div>
<el-container>
<el-header>模仿一个管理系统</el-header>
</el-container>
<el-container>
<el-aside width="200px">
<el-menu>
// to 后面传递组件【直接用组件名字】
<el-menu-item index="1-1"><router-link :to = "{ name: 'users' }">用户管理</router-link></router-link></el-menu-item>
<el-menu-item index="1-2"><router-link :to = "{ name: 'rights' }">权限管理</router-link></el-menu-item>
<el-menu-item index="1-3"><router-link :to = "{ name: 'products' }">商品管理</router-link></el-menu-item>
<el-menu-item index="1-4"><router-link :to = "{ name: 'orders' }">订单管理</router-link></el-menu-item>
<el-menu-item index="1-5"><router-link :to = "{ name: 'settings' }">系统管理</router-link></el-menu-item>
</el-menu>
</el-aside>
<el-container>
// 字路由
<router-view />
</el-container>
</el-container>
<el-container>
<el-footer>模仿版权信息</el-footer>
</el-container>
</div>`,
}
const Users = {
// 设置一些数据
data () {
return {
userData: [
{
id: '1', name: 'Tom', age: '16' },
{
id: '2', name: 'KangKang', age: '15' },
{
id: '3', name: 'Maria', age: '16' },
{
id: '4', name: 'Alex', age: '18' }
]
}
},
template: `<div class = "userInterface">
<el-header>用户管理</el-header>
<el-main>
// 列表信息
<table class = "myTable">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
<tr v-for="user in userData" :key="user.id">
<td>{
{ user.id }}</td>
<td>{
{ user.name }}</td>
<td>{
{ user.age }}</td>
<td>
<el-button @click="getInfo(user.id)">详情</el-button>
</td>
</tr>
</thead>
</table>
</el-main>
</div>`,
methods: {
getInfo (user_id) {
// 路由 + 参数
this.$router.push('/userinfo/' + user_id);
}
}
}
const Rights = {
template: `
<el-header>权限管理</el-header>
`
}
const Products = {
template: `
<el-header>商品管理</el-header>
`
}
const Orders = {
template: `
<el-header>订单管理</el-header>
`
}
const Settings = {
template: `
<el-header>系统管理</el-header>
`
}
const UserInfo = {
props: ['id'],
template: `<div style="margin: 0 auto;">
<p>该用户信息的 ID 为： {
{ id }}</p>
<el-button @click="this.history.go(-1);">返回</el-button>
</div>`
}
// 下面设置路由
const fjRouter = new VueRouter({
routes: [
{
path: '/', component: Main, redirect: '/users', children: [
{
path: '/users', name: 'users', component: Users },
{
path: '/rights', name: 'rights', component: Rights },
{
path: '/products', name: 'products', component: Products },
{
path: '/orders', name: 'orders', component: Orders },
{
path: '/settings', name: 'settings', component: Settings },
{
path: '/userinfo/:id', name: 'user_info', component: UserInfo, props: true }
]},
]
})
const vm = new Vue({
el: '#app', // 挂载
data () {
return {
}
},
router: fjRouter // 使用上面的路由（fjRouter）
})
</script>
<style>
.el-header, .el-footer {
background-color: #B3C0D1;
width: 100%;
color: #333;
text-align: center;
line-height: 60px;
margin: 0 0 5px 0;
}
.el-footer {
margin-top: 5px;
}
.el-aside {
background-color: #D3DCE6;
color: #333;
margin-right: 5px;
text-align: center;
line-height: 200px;
}
.el-main {
background-color: #E9EEF3;
color: #333;
text-align: center;
line-height: 160px;
}
body > .el-container {
margin: 0;
}
.el-menu {
background-color: #D3DCE6;
}
.el-menu .el-menu-item {
background: #c7c684;
color: #000;
margin: 3px 0;
list-style: none;
color: white;
}
.myTable {
width: 100%;
line-height: 50px;
}
.myTable tr:nth-child(odd) {
background: #CCCCCC;
}
.userInterface {
width: 100%;
marigin: 0 auto;
}
</style>
</html>