Vue之ＶueRouter之多级路由（042）

Vue之ＶueRouter之多级路由

一、更改上篇文件结构。components 为pages。同时添加新组件，News,Foods。

二、更改home组件

<template>
    <div>
        <h1>HOME</h1>
        <div>
            <router-link to="/home/news">NEWS</router-link><br>
            <router-link to="/home/foods">FOODS</router-link>
        </div>
        <div>
            <router-view></router-view>
        </div>
    </div>
</template>

三、更改router文件夹下index.js文件

import VueRouter from 'vue-router'
import Home from '../pages/Home.vue'
import About from '../pages/About.vue'
import News from '../pages/News.vue'
import Foods from '../pages/Foods.vue'

export default new VueRouter({
    routes:[{
        path:'/home',
         component:Home, 
         children:[{
	            path:'news',
	            component:News
	          },
	          {
	              path:'foods',
	              component:Foods
	          }
          ]
    },
        {
        path:'/about',
        component:About,
         }
    ]
})

四、效果


五、注意细节
1.children:[{ path:‘news’, 此处path项的值没有“/"。
2****特别说明，使用二级路由，需在一级页面添加 ，二级路由不会返到一级页面之前。