react router @4 和 vue路由 详解(四)vue如何在路由里面定义一个子路由

完整版：https://www.cnblogs.com/yangyangxxb/p/10066650.html

 

6、vue如何在路由里面定义一个子路由？

　　给父路由加一个 children:[]

　　参考我的<1.d>的代码

const routes = [
    {

　　　　 //path是路由的路径

        path:'/',

　　　　 //redirect代表重定向，因为当前路径'/'并没有对应的组件，所以需要重定向到其他路由页面
　　　　
        redirect:'/ho'
    },
    {
        path: '/ho',
        redirect:'/ho/home',

　　　　 //当不需要重定向的时候，需要component写上当前路由对应的组件页面

        component: Home,

　　　　 //有些路由还有子路由，需要用到children[],
　　　　 //当访问的时候，<router-link>的属性to的时候要把所有的父组件都带上
　　　　 //如:此处的/ho/home/like

        children: [

　　　　　　//子路由写在children数组里，仍旧以对象的形式


            {
                name: 'home',
                path: 'home',
                component: Home1,
                redirect:'/ho/home/like',
                children :[
                    {
                        name: 'like',
                        path: 'like',
                        component: Like
                    },
                    {
                        name: '2000001',
                        path: '2000001',
                        component: S1
                    },
                    {
                        name: '2000022',
                        path: '2000022',
                        component: S2
                    }
                ]
            },
            {
                name: 'type',
                path: 'type',
                component: Type
            },
            {
                name: 'need',
                path: 'need',
                component: Need
            },
            {
                name: 'find',
                path: 'find',
                component: Find
            },
            {
                name: 'mine',
                path: 'mine',
                component: Mine
            }
        ]
    },
    {
        name: 'search',
        path: '/search',
        component: Search
    },
    {
        name: 'position',
        path: '/position',
        component: Position0
    },
    {
        name: 'publish',
        path: '/publish',
        component: Publish
    },
    {
        name: 'success',
        path: '/success',
        component: Success
    },
    {
        name: 'listall',
        path: '/listall',
        component: Listall
    },
    {
        name: 'listone',
        path: '/listone',
        component: Listone
    },
    {
        name: 'listchange',
        path: '/listchange',
        component: Listchange
    },
    {
        name: 'map',
        path: '/map',
        component: Map
    }
]

const router = new VueRouter({

    //此处设置mode为history，即不带#号，在处理数据的时候会更方便一些
    mode: 'history',

    //ES6的写法，即routes：routes的简写，当key和value名字一样时，可简写

    routes
})

//把你创建的路由暴露出去，使得main.js可以将其引入并使用

export default router