vue嵌套路由（父子路由）

Posted 2020-12-19 charrammablog

配置父子路由关系，A.vue和B.vue是Main.vue的子组件:

{
      path: ‘/main/‘,
      name: ‘main‘,
      component: () => import(‘components/Main.vue‘),
      children: [
        {
          path: ‘a‘,
          name: ‘a‘,
          component: () => import(‘components/A.vue‘)
        },
        {
          path: ‘b‘,
          name: ‘b‘,
          component: () => import(‘components/B.vue‘)
        }
      ]
    }

编写两个简单的子组件:

• 一个是A.vue

<template>
  <h1>This is A</h1>
</template>

<script>
  export default {
    name: "A"
  }
</script>

<style>
</style>

• 一个是B.vue

<template>
  <h1>This is B</h1>
</template>

<script>
  export default {
    name: "B"
  }
</script>

<style>
</style>

• 然后编写父组件Main.vue

<template>
  <div style="margin-left: 300px;">
    <router-link :to="{name:‘a‘}"><span style="font-size: 50px;">A</span></router-link>
    <router-link :to="{name:‘b‘}"><span style="font-size: 50px;">B</span></router-link>
    <router-view></router-view>
  </div>
</template>

<script>
</script>

<style>
</style>

路由导航<router-link :to="{name:‘a‘}">和<router-link :to="{name:‘b‘}">导向到子路由。
<router-view></router-view>用来显示子路由对应的内容，即子路由对应页面的显示区域。

修改路由配置，添加redirect: {name: "a"},使输入/main/时自动重定向到/main/a

{
      path: ‘/main/‘,
      name: ‘main‘,
      component: () => import(‘components/Main.vue‘),
      redirect: {name: "a"},
      children: [
        {
          path: ‘a‘,
          name: ‘a‘,
          component: () => import(‘components/A.vue‘)
        },
        {
          path: ‘b‘,
          name: ‘b‘,
          component: () => import(‘components/B.vue‘)
        }
      ]
    }