Vue路由之间传参，子路由设置

路由传参

1. params传参
   index.js导入组件，注册路由

   import JobMess from '@/components/JobMess'
   {
     path: '/job', //如果想在地址url上显示加上：path:'/job/:id'
     name: 'jobmess',
     component: JobMess
   },
   

   路由跳转

   <router-link :to="{name:'jobmess',params:{id:123}}" >跳转</router-link>
   

   JobMess.vue接收参数

   <template>
     <div class="row">
       <h1>{{$route.params.id}}</h1>
     </div>
   </template>
   

2. query传参
   index.js导入组件，注册路由

   import JobMess from '@/components/JobMess'
   {
     path: '/job',
     name: 'jobmess',
     component: JobMess
   },
   

   路由跳转

   //query的内容会在url上显示
   <router-link :to="{path:'/job',query:{id:123}}" >跳转</router-link>
   

   JobMess.vue上接收参数

   <template>
     <div class="row">
       <h1>{{$route.query.id}}</h1>
     </div>
   </template>
   

注册二级路由

1. index.js中注册

   export default new Router({
   	routes:[
   		{
         path: '/',
         name: 'index',
         component: Index,
         children:[
         {
         	path:'a1',  //注意：这里path不要加/
         	name:'child',
         	component:Child
         	}
         ]
       	},
   	]
   })
   

2. 在父路由的组件里

   <router-link to="/index/a1 >跳转子路由</router-link>
   //注意，一定要加上才能显示
   <router-view></router-view>