vue路由--嵌套路由

静态嵌套路由：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <router-link to="/green">green</router-link>
    <router-link to="/fruit">fruit</router-link>
<router-view></router-view>
</div>
<template id="green">
<div>蔬菜
    <router-link to="/green/organic">有机</router-link>
    <router-link to="/green/inorganic">无机</router-link>
    <router-view></router-view>
</div>
</template>
<template id="fruit">
<div>水果
    <router-link to="/fruit/sweet">甜的</router-link>
    <router-link to="/fruit/acid">酸的</router-link>
    <router-view></router-view>
</div>
</template>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
    //父路由 有蔬菜，水果，蔬菜里面有有机蔬菜，无机蔬菜 ，水果里面有甜的酸的
    let green={template:'#green'}
    let organic={template:"<div>有机蔬菜organic</div>"}
    let inorganic={template:"<div>无机蔬菜inorganic</div>"}
    let fruit={template:'#fruit'}
    let sweet={template:"<div>甜的</div>"}
    let acid={template:"<div>酸的</div>"}
    //路由路径映射表
    let routes=[
        //路由默认去的第一个组件
        {
            path:'',
            component:green
        },
        {
            path:"/green",
            component:green,
            children:[
                {
                    path:"",
                    component:organic
                },
                {
                    path:"organic",
                    component:organic
                },
                {
                    path:"inorganic",
                    component:inorganic
                }
            ]
        },
        {
            path:"/fruit",
            component:fruit,
            children:[
                {
                    path:"",
                    component:sweet
                },
                {
                    path:"sweet",
                    component:sweet
                },
                {
                    path:"acid",
                    component:acid
                }
            ]

        },
        //所有没有找到时候，去地址/green的组件
        {
            path:"*",
            redirect:'/green'
        }

    ]
    //实例化一个路由
    let router=new VueRouter({
        routes
    })
    let vm=new Vue({
        el:"#app",
        data:{
        },
        router
    })
</script>
</html> 

嵌套路由要通过子路由的方式实现，如果改成以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <router-link to="/green">green</router-link>
    <router-link to="/fruit">fruit</router-link>
<router-view></router-view>
</div>
<template id="green">
<div>蔬菜
    <router-link to="/green/organic">有机</router-link>
    <router-link to="/green/inorganic">无机</router-link>
    <router-view></router-view>
</div>
</template>
<template id="fruit">
<div>水果
    <router-link to="/sweet">甜的</router-link>
    <router-link to="/acid">酸的</router-link>
    <router-view></router-view>
</div>
</template>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
    //父路由 有蔬菜，水果，蔬菜里面有有机蔬菜，无机蔬菜 ，水果里面有甜的酸的
    let green={template:'#green'}
    let organic={template:"<div>有机蔬菜organic</div>"}
    let inorganic={template:"<div>无机蔬菜inorganic</div>"}
    let fruit={template:'#fruit'}
    let sweet={template:"<div>甜的</div>"}
    let acid={template:"<div>酸的</div>"}
    //路由路径映射表
    let routes=[
        //路由默认去的第一个组件
        {
            path:'',
            component:green
        },
        {
            path:"/green",
            component:green,
            children:[
                {
                    path:"",
                    component:organic
                },
                {
                    path:"organic",
                    component:organic
                },
                {
                    path:"inorganic",
                    component:inorganic
                }
            ]
        },
        {
            path:"/fruit",
            component:fruit

        },
        {
            path:"/sweet",
            component:sweet

        },
        {
            path:"/acid",
            component:acid

        },
        //所有没有找到时候，去地址/green的组件
        {
            path:"*",
            redirect:'/green'
        }

    ]
    //实例化一个路由
    let router=new VueRouter({
        routes
    })
    let vm=new Vue({
        el:"#app",
        data:{
        },
        router
    })
</script>
</html>

首先没法用类似/fruit/sweet的路由跳转

用/sweet这样的路由，会把模板渲染到第一个router-view里

把fruit里的两种类型变成动态参数（接收任意水果类型作为动态参数）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <router-link to="/green">green</router-link>
    <router-link to="/fruit">fruit</router-link>
<router-view></router-view>
</div>
<template id="green">
<div>蔬菜
    <router-link to="/green/organic">有机</router-link>
    <router-link to="/green/inorganic">无机</router-link>
    <router-view></router-view>
</div>
</template>
<template id="fruit">
<div>水果
    <router-link to="/fruit/sweet">甜的</router-link>
    <router-link to="/fruit/acid">酸的</router-link>
    <router-view></router-view>
</div>
</template>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
    //父路由 有蔬菜，水果，蔬菜里面有有机蔬菜，无机蔬菜 ，水果里面有甜的酸的
    let green={template:'#green'}
    let organic={template:"<div>有机蔬菜organic</div>"}
    let inorganic={template:"<div>无机蔬菜inorganic</div>"}
    let fruit={template:'#fruit'}
    let fruittype ={template:"<div>{{ $route.params.type }}</div>"}
    //let sweet={template:"<div>甜的</div>"}
    //let acid={template:"<div>酸的</div>"}
    //路由路径映射表
    let routes=[
        //路由默认去的第一个组件
        {
            path:'',
            component:green
        },
        {
            path:"/green",
            component:green,
            children:[
                {
                    path:"",
                    component:organic
                },
                {
                    path:"organic",
                    component:organic
                },
                {
                    path:"inorganic",
                    component:inorganic
                }
            ]
        },
        {
            path:"/fruit",
            component:fruit,
            children:[
                {
                    path: '/',
                    redirect: 'sweet'
                },
                {
                    path:":type",
                    component:fruittype
                }

            ]

        },
        //所有没有找到时候，去地址/green的组件
        {
            path:"*",
            redirect:'/green'
        }

    ]
    //实例化一个路由
    let router=new VueRouter({
        routes
    })
    let vm=new Vue({
        el:"#app",
        data:{
        },
        router
    })
</script>
</html>

redirect实现默认参数，或跳转到默认页面，解决进入页面不点链接时无组件挂载的问题