Vue中路由嵌套的使用

最新推荐文章于 2022-08-11 19:13:32 发布

南风花海

最新推荐文章于 2022-08-11 19:13:32 发布

阅读量239

点赞数 1

分类专栏： vue3 javascript 文章标签： css vue.js html

本文链接：https://blog.csdn.net/nanfengzhishui/article/details/120760864

版权

javascript 同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

10 篇文章 1 订阅

订阅专栏

实际生活中的应用界面，通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件。我们以品字布局为例讲解：

<!--
 * @Author: [jsh]
 * @Date: 2021-10-13 16:04:57
 * @LastEditors: [jsh]
 * @LastEditTime: 2021-10-14 11:20:06
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue路由模板</title>
    <script src="../js/vue.js"></script>
    <script src="../js/vue-router.js"></script>
    <style>
        header{
            height: 50px;
            background-color: teal;
        }
        main{
            display: flex;
        }
        .left{
            width: 150px;
            border: 3px solid orange;
            height: 700px;
            margin: 10px 10px 0 0;
        }
        .right{
            /* flex: 1; */
            width: calc(100% - 150px);
            border: 3px solid blue;
            height: 700px;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div id="app">
        <header>我是网站头部</header>
        <main>
            <div class="left">
                <router-link to="/user">用户管理</router-link><br>
                <router-link to="/student">学生管理</router-link><br>
                <router-link to="/class">班级管理</router-link>
            </div>
            <div class="right">
                <!-- 跳转路由的显示区域 -->
                <!-- 为组件加载提供容器/窗口 -->
                <!-- 实现了组件之间的动态加载 -->
                <router-view></router-view>
            </div>
        </main>
        <!-- 为组件加载 -->
        <!-- 实现组件之间的动态加载 -->
        <router-view></router-view>
    </div>
    <script>
        //1.组件定义
        let com1={
            data(){
                return {}
            },
            template:`
            <div>
                用户管理
            </div>
            `,
        }
        let com2={
            data(){
                return {}
            },
            template:`
            <div>
                学生管理
                <div>
                    <router-link to="/student/grade">成绩管理</router-link>
                    <router-link to="/student/register">学籍管理</router-link>
                </div>
                <router-view></router-view>
            </div>
            `,
        }
        let com3={
            data(){
                return {}
            },
            template:`
            <div>
                班级管理
            </div>
            `,
        }
        let comGrade={
            data(){
                return {}
            },
            template:`
            <div>
                成绩管理
            </div>
            `,
        }
        let comRegister={
            data(){
                return {}
            },
            template:`
            <div>
                学籍管理
            </div>
            `,
        }
        //2.路由定义
        let router=new VueRouter({
            routes:[
                {path:'/user',component:com1},
                {
                    path:'/student',
                    component:com2,
                    children:[
                    {path:'grade',component:comGrade},
                    {path:'register',component:comRegister}
                ]
                },
                {path:'/class',component:com3},
            ]
        })
        let vm =new Vue({
            el:'#app',
            data:{},
            methods:{},
            //3.路由组件注册
            router:router
        })
    </script>
</body>
</html>

记得要引入router和vue文件可以本地引入，也可以在线引入

我这里是本地引入也可以去bootcdn去查找文件

vue (v3.2.0-beta.7) - Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。 | BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务

南风花海

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue中路由嵌套的使用

实际生活中的应用界面，通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件。我们以品字布局为例讲解：<!DOCTYPE html><html lang=..
复制链接

扫一扫