6、嵌套路由

 

 代码：App.vue

<template>
  <div class="w">
    <router-link active-class="active" to="/about">About</router-link> |
    <router-link active-class="active" to="/home">Home</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {

}
</script>

<style>
.w {
  width: 500px;
  height: 300px;
  background-color: #eee;
  margin: 100px auto;
  text-align: center;
}
</style>

home.vue:

message.vue  和 new.vue是home.vue组件下的二级组件，同于home组件的孩子，所以两者的路由展示发生在home组件中

注意：

在home组件中，指向二级组件的路径写法是 to:“/home/new”

在index.js 中，message.vue  和 new.vue是home.vue组件下的二级组件，所以这两个组件的path、component用children以数组形式展示，并写在home内

<template>
    <div class="home">
        <h1>这是Home组件</h1>
        <div>
            <router-link to="/home/message">Message</router-link>   |  
            <router-link to="/home/new">Home</router-link>
            <router-view></router-view>
        </div>

    </div>
</template>

<script>
export default {

} 
</script>

<style>

</style>

new.vue

<template>
    <ul>
        <li>news001</li>
        <li>news002</li>
        <li>news003</li>
    </ul>
</template>
 
<script>
export default {
}
</script>
 
<style lang="">
    
</style>

message.vue

<template>
    <div class="message">
        <ul>
            <li v-for="item in list" :key="item.id">
                <span>{{item.id}}————{{item.title}}</span>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    data() {
        return {
            list: [
                { id: '001', title: '感谢' },
                { id: '002', title: '感谢啊' },
                { id: '003', title: '非常感谢' }
            ]
        }
    }

}
</script>

<style>

</style>

index.js

在index.js 中，message.vue  和 new.vue是home.vue组件下的二级组件，所以这两个组件的path、component用children以数组形式展示，并写在home内

注意：二级路由的组件指向前面不加“/”，path:'message',

import Vue from 'vue'
import VueRouter from 'vue-router'

// 引入组件
import About from '@/components/about.vue'
import Home from '@/components/home.vue'
import Message from '@/components/message.vue'
// 二级组件同样在index.js中引入
import New from '@/components/new.vue'
Vue.use(VueRouter)
export default new VueRouter({
    routes:[
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home,
            // message、new组件是home组件路径下的组件，同于home的孩子
            children:[
                {
                    // 二级组件（嵌套组件在编写路径时前面不加“/”）
                    path:'message',
                    component:Message
                },
                {
                    path:'new',
                    component:New
                },

            ]
        }
    ]

})