vue-louter传值

vue-louter三种传值方式：
1.直接路由后跟参数，路由配置表中相应配置，通过params来传参
2.通过路由属性中的name来确定匹配的路由，通过params来传递参数。
3.使用path来匹配路由，然后通过query来传递参数；
组件代码如下
<div id="app">
  <h3>路由传值方式</h3>
  <p>{{ $route.params.aaa }}</p> 　　<!--第一种获取值方法-->
  <p>{{ $route.params.id }}</p>  　　<!--第二种获取值方法-->
  <p>{{ $route.query.aaa }}</p>  　　<!--第三种获取值方法-->
  <ol>
    <li><router-link to="/">默认路由</router-link></li>
    <li>
      <router-link to="/first/222">first路由</router-link> 　　<!--第一种方式-->
      <ol>
        <li><router-link to="/first/first">firstFirst路由</router-link></li>
        <li><router-link to="/first/second">firstSecond路由</router-link></li>
      </ol>
    </li>
    <li><router-link :to="{name:'Second',params:{id:123}}">second路由</router-link></li> 　　<!--第二种方式-->
    <li><router-link :to="{path:'/third',query:{aaa:'query传值'}}">third路由</router-link></li> 　　<!--第三种方式-->
  </ol>
  <router-view></router-view>
</div>
路由配置index.js代码如下：
  import Vue from 'vue'
  import Router from 'vue-router'
  import Helloworld from '@/components/Helloworld'
  Vue.use(Router);
  const First = {template:'<div>first路由</div>'};
  const Second = {template:'<div>second路由</div>'};
  const Third = {template:'<div>third路由</div>'};
  const firstMoban = {
  template:'<div>' +
    '<p>子路由实现</p>' +
    '<router-view></router-view>' +
    '</div>'
  }
  const firstFirst = {template:'<div>firstFirst路由</div>'};
  const firstSecond = {template:'<div>firstSecond路由</div>'};
  export default new Router({
    mode:'history',
    routes: [
    {path: '/', name: 'HelloWorld', component:Helloworld},
    {
      path: '/first/:aaa',
      component:firstMoban,
      children:[
        {path: '/', name: 'First', component:First},
        {path: 'first', name: 'firstFirst', component:firstFirst},
        {path: 'second', name: 'firstSecond', component:firstSecond}
      ]
    },
    {path: '/second', name: 'Second', component:Second},
    {path: '/third', name: 'Third', component:Third}
    ]
  })