在components下新建CustomerDetails.vue:
<template>
<div class="details container" >
<h1 class="page-header">{{customer.name}}</h1>
<ul>
<li class="list-group-item"><span class="glyphicon glyphicon-star">{{customer.phone}}</span></li>
<li class="list-group-item"><span class="glyphicon glyphicon-star">{{customer.email}}</span></li>
<li class="list-group-item"><span class="glyphicon glyphicon-star">{{customer.education}}</span></li>
<li class="list-group-item"><span class="glyphicon glyphicon-star">{{customer.graduationschool}}</span></li>
<li class="list-group-item"><span class="glyphicon glyphicon-star">{{customer.profession}}</span></li>
<li class="list-group-item"><span class="glyphicon glyphicon-star">{{customer.profile}}</span></li>
</ul>
</div>
</template>
<script>
export default {
name: 'customerdetails',
data () {
return {
customer:""
}
},
methods:{
fetchCustomers(id){
this.$http.get("http://localhost:3000/users/"+id)
.then(function(response){
console.log(response);
this.customer = response.body;
})
}
},
created(){
this.fetchCustomers(this.$route.params.id);//获取用户id用来查询具体用户数据返回
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
思路和Customers.vue一样,也是在实例被创建的时候通过http请求数据然后展示!
同样需要在main.js中注册路由:
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import VueResource from 'vue-resource'
import Customers from './components/Customers'
import About from './components/About'
import Add from './components/Add'
import CustomerDetails from './components/CustomerDetails'
Vue.config.productionTip = false
Vue.use(VueRouter)
Vue.use(VueResource)
//设置路由
const router = new VueRouter({
mode:"history",
base:__dirname,
routes:[
{path:"/",component:Customers},
{path:"/about",component:About},
{path:"/add",component:Add},
{path:"/customerdetails/:id",component:CustomerDetails}//注册详情路由
]
})
/* eslint-disable no-new */
new Vue({
router,
template:`
<div id="app">
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">用户管理系统</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li ><router-link to="/">主页</router-link></li>
<li ><router-link to="/about">关于我们</router-link></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li ><router-link to="/add">添加用户</router-link></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<router-view></router-view>
</div>
`
}).$mount("#app")
当然在用户主页将详情按钮及路由跳转需要加入进来:
<tr v-for="customer in customers">
<td>{{customer.name}}</td>
<td>{{customer.phone}}</td>
<td>{{customer.email}}</td>
<td><router-link class="btn btn-default" v-bind:to="'/customerdetails/'+customer.id">详情</router-link></td>
</tr>
Customers.vue完整代码如下:
<template>
<div class="customers container">
<Alert v-if="alert" v-bind:message="alert"></Alert>
<h1 class="page-header">用户管理系统</h1>
<table class="table table-striped">
<thead>
<tr>
<th>姓名</th>
<th>电话</th>
<th>邮箱</th>
<th></th>
</tr>
</thead>
<tbody>
<tr v-for="customer in customers">
<td>{{customer.name}}</td>
<td>{{customer.phone}}</td>
<td>{{customer.email}}</td>
<td><router-link class="btn btn-default" v-bind:to="'/customerdetails/'+customer.id">详情</router-link></td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
import Alert from "./Alert"
export default {
name: 'customers',
data () {
return {
customers:[],
alert:""
}
},
methods:{
fetchCustomers(){
this.$http.get("http://localhost:3000/users")
.then(function(response){
//console.log(response);
this.customers = response.body;
})
}
},
created(){
if(this.$route.query.alert){
this.alert = this.$route.query.alert;
}
this.fetchCustomers();
},
updated(){
this.fetchCustomers();
},
components:{
Alert
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>