vue 嵌套路由例子

最新推荐文章于 2024-04-29 23:47:56 发布

好菜的程序媛

最新推荐文章于 2024-04-29 23:47:56 发布

阅读量617

点赞数 3

分类专栏： vue 文章标签： vue 嵌套路由

本文链接：https://blog.csdn.net/Gomeer/article/details/85098414

版权

vue 专栏收录该内容

38 篇文章 1 订阅

订阅专栏

需求：

首页： /index

订单： /order

美食： /food

美食中有：

蛋糕： /food/cake

大米： /food/rice

鸡蛋： /food/egg

而cake,rice,egg三个模块版式不同，所以并不适合用动态路由

美食组件不同于其他两个组件

var Foods={
    template:`
        <div>这是foods中的内容
            <router-link to="/foods/cake">蛋糕</router-link>
            <router-link to="/foods/rice">大米</router-link>
            <router-link to="/foods/egg">鸡蛋</router-link>
            <router-view></router-view>
        </div>
    `
}

美食组件的路由表有个children属性，children是个数组，里面放了子组件的路径

{
    path:"/foods",
    component:Foods,
    children:[
    //刚进来时在cake页面
        {
           path:"/foods/",
           redirect:"cake"
        },
        {
            path:"/foods/rice",
            component:Rice
        },
        {
            path:"/foods/egg",
            component:Egg
        },
        {
            name:"cake",
            path:"/foods/cake",
            component:Cake
        }
    ]
}

全部代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        nav{
            position: fixed;
            display: flex;
            width:100%;
            bottom:0;
        }
        nav a{
            color:blue;
            flex-grow:1;
            height: 80px;
            line-height:80px;
            text-align: center;
            border:solid 1px blue
        }
        nav a.active{
            background-color: blue;
            color:#fff;
        }
    </style>
</head>
<body>
    <div id="app">
        <router-view></router-view>
        <nav>
            <router-link to="/" >首页</router-link>
            <router-link to="/order">订单</router-link>
            <router-link to="/foods">美食</router-link>
        </nav>
    </div>
    <script src="../js/vue.js"></script>
    <script src="vue-router.js"></script>
    <script>
        var Index={
            template:`
                <div>这是首页中的内容</div>
            `
        }
        var Order={
            template:`
                <div>这是订单中的内容</div>
            `
        }
        var Foods={
            template:`
                <div>这是foods中的内容
                    <router-link to="/foods/cake">蛋糕</router-link>
                    <router-link to="/foods/rice">大米</router-link>
                    <router-link to="/foods/egg">鸡蛋</router-link>
                    <router-view></router-view>
                </div>
            `
        }
        var Cake={
            template:`
                <div>
                    <h2>这是蛋糕内容</h2>
                    <hr>
                    <div style="height:100px;background-color:red"></div>
                </div>
            `
        }
        var Rice={
            template:`
                <div>
                    <h2>这是大米内容</h2>
                    <ol>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ol>
                </div>
            `
        }
        var Egg={
            template:`
                <div>
                  <h2>这是鸡蛋内容</h2>
                  <div style="width:25%;height:400px;background-color:red;float:left"></div>
                  <div style="width:75%;height:400px;background-color:blue"></div>
                </div>
            `
        }
        var routes=[
            {
                path:"/",
                component:Index
            },
            {
                path:"/order",
                component:Order
            },
            {
                path:"/foods",
                component:Foods,
                children:[
                //刚进来时在cake页面
                    {
                       path:"/foods/",
                       redirect:"cake"
                    },
                    {
                        path:"/foods/rice",
                        component:Rice
                    },
                    {
                        path:"/foods/egg",
                        component:Egg
                    },
                    {
                        name:"cake",
                        path:"/foods/cake",
                        component:Cake
                    }
                ]
            }
        ]
        var router=new VueRouter({
            routes,
            linkExactActiveClass: 'active'
        })  

        var vm = new Vue({
            el:"#app",
            router
        })
    </script>
</body>
</html>
</html>