Vue CLI：多级路由children（二）

配置路由规则，使用children配置项(src\router\index.js)

// 该文件专门用于创建整个应用的路由器

import VueRouter from 'vue-router';

// 引入组件 
import Home from '../pages/Home';
import ProductIndex from '../pages/Product/Index';
import ProductList from '../pages/Product/List';
import ProductCategory from '../pages/Product/Category';
// 创建并暴露一个路由器
export default new VueRouter({
    routes: [
        {
            path: '/product',
            component: ProductIndex,
            children: [  //通过children配置子级路由
                {
                    path: 'list', //此处一定不要带斜杠，实际使用为: /product/list
                    component: ProductList
                }, {
                    path: 'category', //实际为:   /product/category
                    component: ProductCategory
                },
            ]
        },
        {
            path: '/home',
            component: Home
        }
    ]
}) 

跳转页面（src\pages\Product\Index.vue）

<template>
    <div>
        <h3>产品首页(/product)</h3>

        <ul class="nav nav-tabs">
            <!-- 使用 router-link 组件来导航. -->
            <li><router-link to="/product/list">产品列表</router-link></li>
            <li><router-link to="/product/category">产品分类</router-link></li>
        </ul>

        <!-- 路由匹配到的组件将渲染在这里 -->
        <router-view></router-view>
    </div>
</template>