//这是用户管理页面
<template>
<div>
<!-- 标题 -->
<h4 class="text-center">用户管理</h4>
<!-- 用户列表 -->
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>头衔</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for=" item in userlist" :key="item.id">
<td>{
{ item.id }}</td>
<td>{
{ item.name }}</td>
<td>{
{ item.age }}</td>
<td>{
{ item.position }}</td>
<td>
<a href="javascript:;" @click.prevent="gotoDetail(item.id)">详情</a>
</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
name: 'MyUser',
data() {
return {
// 用户列表数据
userlist: [
{ id: 1, name: '嬴政', age: 18, position: '始皇帝' },
{ id: 2, name: '李斯', age: 35, position: '丞相' },
{ id: 3, name: '吕不韦', age: 50, position: '商人' },
{ id: 4, name: '赵姬', age: 48, position: '王太后' }
]
}
},
methods:{
gotoDetail(id){
this.$router.push('/home/userinfo/'+ id)
// console.log(id);
}
}
}
</script>
<style lang="less" scoped></style>
//用户详情页
<template>
<div>
<button type="button" class="btn btn-light btn-sm" @click="$router.back()">后退</button>
<!-- <h4 class="text-center">用户详情 --- {
{ this.$route.params.id}}</h4> -->
<h4 class="text-center">用户详情 --- {
{id}}</h4>
</div>
</template>
<script>
export default {
name: 'MyUserDetail',
props:[ 'id']
}
</script>
<style lang="less" scoped></style>
//router
import Vue from "vue";
import VueRouter from 'vue-router';
import Login from '../components/MyLogin';
import Home from '../components/MyHome';
import Users from '../components//menus/MyUsers'
import Rights from '../components//menus/MyRights'
import Goods from '../components//menus/MyGoods'
import Orders from '../components//menus/MyOrders'
import Settings from '../components//menus/MySettings'
import MyUserDetail from '../components/user/MyUserDetail'
Vue.use(VueRouter)
const router = new VueRouter({
routes: [
{ path: '/', redirect: '/login' },
{ path: '/login', component: Login },
{
path: '/home', component: Home,
redirect: '/home/users',children: [
{ path: 'users', component: Users },
{ path: 'rights', component: Rights },
{ path: 'goods', component: Goods },
{ path: 'orders', component: Orders },
{ path: 'settings', component: Settings },
{ path: 'userinfo/:id', component: MyUserDetail, props: true },
]
},
]
})
router.beforeEach(function (to, from, next) {
const pathArr = [ '/home/users','/home/rights']
if ( pathArr.indexOf( to.path ) !== -1 ) {
if (token) {
const token = localStorage.getItem('token')
next()
} else {
next('/login')
}
} else {
next()
}
})
export default router