router 子路由（路由）修改

新建路由

1. components文件夹下新建.vue文件，里面为新组件的内容。
2. index.js路由文件中添加引用，并且在router中添加路径信息。

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/hi',
      name: 'Hi',
      component: Hi,
    }
  ]
})

新建子路由

子路由类似于对象中继承的关系。

1. components文件夹下新建.vue文件，里面为新组件的内容。
2. index.js路由文件中添加引用，并且在router中添加路径信息。
   Hi，页面中有两个子路由页面Hi1和Hi2，即Hi1与Hi2是Hi的子路由。
3. 父路由中（Hi.vue）需要添加<router-view class="aaa"></router-view>

<!--Hi.vue-->
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'hi',
  data () {
    return {
      msg: 'Hi, I am Hi'
    }
  }
}
</script>
<style scoped>
</style>

<!--index.js-->
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/hi',
      name: 'Hi',
      component: Hi,
      children:[
        {path:'/',component:Hi},
        {path:'hi1',component:Hi1},
        {path:'hi2',component:Hi2},
      ]
    }
  ]
})

router 传参

在导航页面中<router-link>进行传参，基本语法：

<router-link :to="{name:xxx,params:{key:value}}">valueString</router-link>

这里的to前边是带冒号的，然后后边跟的是一个对象形势的字符串.

• name：就是我们在路由配置文件中起的name值。
• params：就是我们要传的参数，它也是对象形势，在对象里可以传递多个值。

<router-link :to="{name:'hi1',params:{username:'jspang'}}">Hi页面1</router-link>

页面中的引用：

{{$route.params.username}}