从零开始学VUE之VueRouter(嵌套路由)

彼岸舞

发布于 2021-07-01 18:07:56

2300

发布于 2021-07-01 18:07:56

文章被收录于专栏：java开发的那点事

嵌套路由

实现嵌套路由有两个步骤

创建对应的子组件,并在路由映射中配置对应的子路由

组件内部使用router-view 标签渲染

创建组件

homeMessage.vue

<template>
  <div>
    <h2>消息1</h2>
    <h2>消息2</h2>
    <h2>消息3</h2>
  </div>
</template>

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

<style scoped>

</style>

homeNews.vue

<template>
  <div>
    <h2>新闻1</h2>
    <h2>新闻2</h2>
    <h2>新闻3</h2>
  </div>
</template>

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

<style scoped>

</style>

修改index.js

{
      path: '/home',
      name: 'home',
      component: home,
      children:[
        {
          path:'news',
          component:homeNews
        },
        {
          path:'message',
          component:homeMessage
        },
      ]
    }

修改home.vue

<template>
  <div>
    <h2>this is home!</h2>
    <router-link to="/home/news">新闻</router-link>
    <router-link to="/home/message">消息</router-link>
    <router-view />
  </div>
</template>

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

<style scoped>

</style>

<template>
  <div>
    <h2>this is home!</h2>
    <router-link to="/home/news">新闻</router-link>
    <router-link to="/home/message">消息</router-link>
    <router-view />
  </div>
</template>

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

<style scoped>

</style>

效果