https://router.vuejs.org/zh/guide/#html
https://router.vuejs.org/zh/guide/essentials/nested-routes.html

目标

• 简单路由
• 路由嵌套

用 Vue.js + Vue Router 创建单页应用，是非常简单的。使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 Vue Router 添加进来，我们需要做的是，将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们。

1、简单的路由

app.vue

<template>
  <div id="app">
    <router-link to="/home">主页</router-link>
    <router-link to="/props">props</router-link>
    <router-link to="/parentjson">parentjson</router-link>
    <router-link to="/refparent">refparent</router-link>
   <!-- <img src="./assets/logo.png"> -->
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

router/index.js

import props from '@/components/props/parent'
import  parentjson from '@/components/props/parentjson'
import  refparent from '@/components/refs/parent'
{
    path: '/props',
    name: 'props',
    component: props
},

{
    path: '/parentjson',
    name: 'parentjson',
    component: parentjson
},

{
    path: '/refparent',
    name: 'refparent',
    component: refparent
}

这样就可以在多个页面间自由切换了

2、路由嵌套

要在嵌套的出口中渲染组件，需要在 VueRouter 的参数中使用 children 配置：

例1

新增加三个vue
index.vue
top.vue
middle.vue

<template>
  <div>
    <top></top>
    <middle></middle>
    <!--路由出口 路由到的地址在这儿显示 -->

  </div>
</template>

<script>
  import top from '@/components/router/top'
  import middle from '@/components/router/middle'
  export default{
    data(){
      return {}
    },
    components:{
      top,middle
    }
  }
</script>

<style>
</style>


<template>
  <div class="top">top</div>
</template>

<script>
  export default{
    data(){
      return {}
    }
  }
</script>

<style>
  .top{
    margin:0;
    width:100vw;
    height:10vh;
    background-color: #42B983;
  }
</style>



  <template>
    <div class="middle">
      <router-link to="/parent">parent</router-link>
      <router-link to="/parent01">parent01</router-link>
      <router-link to="/parent02">parent02</router-link>
      <!--路由出口 路由到的地址在这儿显示 -->
  <router-view/>

    </div>
  </template>

  <script>
    export default{
      data(){
        return {}
      }
    }
  </script>

  <style>
    .middle{
      width: 100vw;
      height: 50vh;
      background-color: aliceblue;
    }
  </style>

路由配置

    import index from '@/components/router/index'

{
  path: '/index',
  name: 'index',
  component: index,
  //children:[{},{}]
  children:[{
    path: '/parent',
    name: 'parent',
    component: parent
  },
  {
    path: '/parent01',
    name: 'parent01',
    component: parent01
  }
  ]
}

测试

浏览器输入地址，他会自动嵌入到子组件里

http://localhost:8080/#/index

关键代码

嵌套路由及子组件中的 <router-view/>

{
  path: '/index',
  name: 'index',
  component: index,
  //children:[{},{}]
  children:[{
    path: '/parent',
    name: 'parent',
    component: parent
  },
  {
    path: '/parent01',
    name: 'parent01',
    component: parent01
  }
  ]
}