vue-router 子组件路由

此文demo不是子组件路由嵌套，而是在子组件中使用路由将另一个子组件渲染到最顶级的出口<router-view>中。

需注意的是:

    ① main.js中router路由的配置：

           {path:'/customer',name:'customer',component:Customer},
          {path:'/customer/viewDetail/:id',component:ViewDetail}

    ② customer组件中路由导航<router-link> ：

           <router-link class="btn btn-default" v-bind:to="'/customer/viewDetail/'+ customer.id">详情</router-link>

代码如下：main.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Axios from 'axios'
import Abort from '@/components/Abort'
import Customer from './components/customer'
import AddCustomer from './components/AddCustomer'
import ViewDetail from './components/viewDetail'

Vue.use(VueRouter);
Vue.prototype.$axios = Axios;

Vue.config.productionTip = false;
Vue.config.devtools = true;

const routes = [
         //每个路由映射一个组件
      {path:"/abort",component:Abort},
      {path:'/customer',name:'customer',component:Customer},
      {path:'/addCustomer',component:AddCustomer},
      {path:'/customer/viewDetail/:id',component:ViewDetail}
];

//创建router实例，
const router = new VueRouter({
  mode:'history',
	routes
});

//通过router配置参数注入路由
//使整个应该都应用路由功能
new Vue({
  el: '#app',
  router,
  template: `
            <div>
              <nav class="navbar navbar-default">
                 <div class="container-fluid">
                    <div class="navbar-header">
                      <span class="navbar-brand">   用户信息管理 </span>
                    </div>
                    <div class="collapse navbar-collapse">
                       <ul class="nav navbar-nav">
                         <li><router-link to="/customer">主页</router-link></li>
                         <li><router-link to="/abort">关于我们</router-link></li>
                       </ul>
                       <ul class="nav navbar-nav navbar-right">
                         <li><router-link to="/addCustomer">添加用户</router-link></li>
                       </ul>
                    </div>
                 </div>
              </nav>
              <div>
                <router-view></router-view>
              </div>
            </div>
  `
})

customer.vue  ---customer子组件代码

<template>
	<div class="customer">
		<Alert v-show="$route.params.tipsFlg"></Alert>
		<h2>用户管理系统</h2>
		<input type="text" class="form-control" v-model="fileterInp">
		<hr>
		<div>
			<table class="table table-bordered table-hover">
				<thead >
					<tr>
						<th>姓名</th>
				        <th>电话</th>
				        <th>邮箱</th>
				        <th>学历</th>
				        <th>毕业学校</th>
				        <th>职业</th>
				        <th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="customer in fileterBy(customers,fileterInp)">
						<td>{{customer.name}}</td>
						<td>{{customer.phone}}</td>
						<td>{{customer.email}}</td>
						<td>{{customer.education}}</td>
						<td>{{customer.graduationschool}}</td>
						<td>{{customer.profession}}</td>
					<!-- 	<td>
							<span class="btn btn-default btn-sm"><router-link to="/veiwDetail">详情</router-link></span>
						</td> -->
						 <td><router-link class="btn btn-default" v-bind:to="'/customer/viewDetail/'+ customer.id">详情</router-link></td>
					</tr>
				</tbody>
			</table>
		</div>
		<div>
		<router-view></router-view>
	   </div>
	</div>
</template>

<script >
    import Alert from './Alert'
	export default{
		name:'customer',
		components:{
			Alert
		},
		data(){
			return {
				customers:[],
				tipsFlg:false,
				fileterInp:""
			}
		},
		created:function(){
			let that = this;
			this.$axios.get('http://127.0.0.1:3000/users')
			.then(response => that.customers = response.data);
		},
		methods:{
		  fileterBy(obj,filterValue){
		  	 let arrTemp ;
		  	 arrTemp =  obj.filter(function(val){
                     return val.name.match(filterValue);
		  	  });
             return arrTemp;
		  }

	
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.customer{
		width: 60%;
        margin: 25px auto;
	}
</style>

viewDetail.vue ----viewDetail子组件代码

<template>
	<div class="addCustomer">
		<router-link class="btn btn-default btn-sm" to="/customer">返回</router-link>
		<div>
		   <h3>
		   	 Henry
            <span class="pull-right">
		      <button class="btn btn-primary btn-sm">编辑</button>
		   	  <button class="btn btn-danger btn-sm">删除</button>
		   	</span>  
		   </h3>
		</div>
		<hr>
		<div>
           <ul class="list-group">
           	  <li class="list-group-item"><span class="glyphicon glyphicon-asterisk">{{customer.name}}</span></li>
           	  <li class="list-group-item">{{customer.phone}}</li>
           	  <li class="list-group-item">{{customer.email}}</li>
           	  <li class="list-group-item">{{customer.education}}</li>
           </ul>
		</div>

	</div>
</template>

<script>
   export default {
   	  name:'veiwDetail',
   	  data(){
           return {
           	  customer:[]
           }
   	  },
   	  created(){
        let that = this;
        console.log('detial');
   	  	this.$axios.get('http://localhost:3000/users?id=' + that.$route.params.id)
   	  	.then(function(response){
   	  		  console.log(response);
              that.customer = response.data[0];
   	  	})
   	  	.then(function(json){

   	  	});
   	  }
   }
	
</script>

<style>
	.addCustomer{
		width: 50%;
        margin: 50px auto;
	}
</style>

这是也困扰了3天才找到解决方法，希望能给遇到同样问题的童鞋有点小帮助。至于为什么要这样写，我也不知道o(╥﹏╥)o，知识浅薄，能力不足。。。

ε=(´ο｀*)))以后知道原因 再来补更吧