路由嵌套（套娃）

最新推荐文章于 2023-01-15 17:27:23 发布

神仙刘

最新推荐文章于 2023-01-15 17:27:23 发布

阅读量325

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_41936090/article/details/112171993

版权

Vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

刚刚做了个路由嵌套的练习，先看看效果：
none
虽然做的很简陋，但是已经可以看出路由嵌套的应用场景了，在当个页面内切换视图，如德芙一般的纵享丝滑。接下来直接放代码：
看代码之前请先说一下这个命名：
菜单一：包含了面板一和面板二
菜单二：包含了面板三和面板四

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>嵌套路由</title>
    <script src="js/vue.js"></script>
    <script src="js/vue-router.js"></script>
    <style>
        #app{

            margin-left: 500px;
            margin-top: 50px;
        }
        .menu1{
            width: 350px;
            height: 350px;
            background: pink;
        }
        .menu2{
            width: 350px;
            height: 350px;
            background: #d6e9c6;
        }
        .panel1{
            width: 350px;
            height: 300px;
            background: skyblue;
        }
        .panel2{
            width: 350px;
            height: 300px;
            background: #c4e3f3;
        }
        .panel3{
            width: 350px;
            height: 300px;
            background: lightyellow;
        }
        .panel4{
            width: 350px;
            height: 300px;
            background: palegreen;
        }
    </style>
</head>
<body>
    <div id="app">
         <router-link to="/menu1" tag="button">menu1</router-link>
         <router-link to="/menu2" tag="button">menu2</router-link>
        <router-view></router-view>
    </div>

    <template id="menu1">
        <div class="menu1">
            <p>menu1</p>
            <router-link to="/panel1" tag="button">panel1</router-link>
            <router-link to="/panel2" tag="button">panel2</router-link>
            <router-view></router-view>
        </div>
    </template>
    <template id="menu2">
        <div class="menu2">
            <p>menu2</p>
            <router-link to="/panel3" tag="button">panel3</router-link>
            <router-link to="/panel4" tag="button">panel4</router-link>
            <router-view></router-view>
        </div>
    </template>
    <template id="panel1">
        <div class="panel1">
            <p>panel1</p>
        </div>
    </template>
    <template id="panel2">
        <div  class="panel2">
            <p>panel2</p>
        </div>
    </template>
    <template id="panel3">
        <div class="panel3">
            <p>panel3</p>
        </div>
    </template>
    <template id="panel4">
        <div  class="panel4">
            <p>panel4</p>
        </div>
    </template>


<script>

    let panel1 = {
        template:"#panel1",
    }
    let panel2 = {
        template:"#panel2"
    }

    let panel3 = {
        template:"#panel3",
    }
    let panel4 = {
        template:"#panel4"
    }

    let menu1 = {
        template:"#menu1",
        components: {
            panel1,
            panel2
        }
    }
    let menu2 = {
        template:"#menu2",
        components: {
            panel3,
            panel4
        }
    }
    //设置路由,嵌套路由得在一级路由下使用children属性继续
    let rules = [
        {path:'/menu1',  component: menu1, children:[
                {path:'/panel1', component: panel1},
                {path:'/panel2', component: panel2}
            ]},
        {path:'/menu2',  component: menu2, children: [
                {path:'/panel3', component: panel3},
                {path:'/panel4', component: panel4},
            ]},
        {
        	//一打开页面，就直接显示出子面板来
            path:"/",redirect: '/panel1'
        }
    ]

    let router = new VueRouter({
        routes:rules,
        //不知道为什么加上这个，重定向会失败
        //mode:'history'
    })

    new Vue({
        el:"#app",
        router,
        components:{
            menu1,
            menu2
        }
    })
</script>
</body>

</html>

实现路由嵌套的重点在于设置路由的时候，写完一级路由，然后使用children属性写二级路由进行套娃，（因为是多个子面板，所以用中括号，以数组形式进行配置，大括号代表对象）

	    let rules = [
	    //第一个菜单
        {path:'/menu1',  component: menu1, children:[
        		//子面板
                {path:'/panel1', component: panel1},
                {path:'/panel2', component: panel2}
            ]},
        //第二个菜单
        {path:'/menu2',  component: menu2, children: [
                {path:'/panel3', component: panel3},
                {path:'/panel4', component: panel4},
            ]},
            //一打开页面就重定向到子面板1里
        {
            path:"/",redirect: '/panel1'
        }
    ]

虽然一开始觉得写的很不习惯，但是多写几次就觉得十分方便了。

神仙刘

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
路由嵌套（套娃）

刚刚做了个路由嵌套的练习，先看看效果：虽然做的很简陋，但是已经可以看出路由嵌套的应用场景了，在当个页面内切换视图，如德芙一般的纵享丝滑。接下来直接放代码：看代码之前请先说一下这个命名：菜单一：包含了面板一和面板二菜单二：包含了面板三和面板四<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>嵌套路由</t
复制链接

扫一扫