【1】页面布局
<div id="app">
<router-view></router-view>
</div>
【2】组件定义
==================根组件==================
const App = {
template: `
<div>
<header>XXX后台管理系统</header>
<main>
<div class="nav left">
<ul>
<!-- 设置路由 -->
<li>
<router-link to="/users">用户管理</router-link>
</li>
<li>
<router-link to="/goods">商品管理</router-link>
</li>
<li>
<router-link to="/rights">权限管理</router-link>
</li>
<li>
<router-link to="/orders">订单管理</router-link>
</li>
</ul>
</div>
<div class="content right">
<router-view></router-view>
</div>
</main>
<footer>*****公司版权所有*****</footer>
</div>
`
};
==================子组件组件==================
===============用户组件==============
const Users = {
template: `
<div>
<h2>用户管理</h2>
<table>
<thead>
<tr>
<th>用户编号</th>
<th>用户姓名</th>
<th>用户年龄</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="user in userlist" :key="user.id">
<td>{{user.id}}</td>
<td>{{user.name}}</td>
<td>{{user.age}}</td>
<td>
<a href="javascript:;" @click="goDetai(user.id)">查看详情</a>
</td>
</tr>
</tbody>
</table>
</div>
`,
data() {
return {
userlist: [{
id: 1,
name: 'zs',
age: 20
}, {
id: 2,
name: 'ls',
age: 20
}, {
id: 3,
name: 'ww',
age: 20
}]
}
},
methods: {
goDetai(id) {
//push跳转组件
this.$router.push(`/userinfo/${id}`);
}
}
};
//users 进一步组件
const UserDetail = {
props: ['id'],
template: `
<div>
<h2>用户详情：该用户id为{{id}}</h2>
</div>
`
}
================权限、产品、订单组件简单定义============
const Rights = {
template: `
<h3>权限管理区</h3>
`
}
const Products = {
template: `
<h3>产品管理区</h3>
`
}
const Orders = {
template: `
<h3>订单管理区</h3>
`
}
【3】路由规则定义
const router = new VueRouter({
routes: [{
path: '/',
component: App,
redirect: '/users',
children: [{
path: '/users',
component: Users
}, {
path: '/rights',
component: Rights
}, {
path: '/goods',
component: Products
}, {
path: '/orders',
component: Orders
}, {
path: '/userinfo/:id',
component: UserDetail,
props: true
}]
}]
});
//挂载路由
const vm = new Vue({
el: '#app',
router
});