vue的路由嵌套

红太狼 2022-05-24 23:42 287阅读 0赞

嵌套路由就是路由里面嵌套他的子路由

子路由关键属性children

每一个子路由里面可以嵌套多个组件

子组件又有路由导航和路由容器

<router-link to="/父路由的地址名字/要去的子路由的名字"></router-link>

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div id="app">
        <router-link to="/green" tag="li">green</router-link>
        <router-link to="/fruit" tag="li">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="node_modules/vue/dist/vue.js"></script>
    <script src="node_modules/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>