巢狀路由

實現巢狀路由有兩個步驟

建立對應的子元件,並在路由對映中配置對應的子路由

元件內部使用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>

效果

點選新聞

點選訊息

作者：彼岸舞

時間：2021\06\28

內容關於：VUE

本文屬於作者原創,未經允許,禁止轉發