【Vue】路由Router嵌套的实现及经典案例

Vue 中路由在使用的时候嵌套使用是非常频繁的，所以本文我们就来通过案例介绍一下嵌套路由的使用。Vue路由嵌套先来准备一个普通的路由案例：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script

心。晴

3284人浏览 · 2020-09-03 11:50:34

心。晴 · 2020-09-03 11:50:34 发布

Vue 中路由在使用的时候嵌套使用是非常频繁的，所以本文我们就来通过案例介绍一下嵌套路由的使用。

Vue路由嵌套

先来准备一个普通的路由案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.4.3/vue-router.min.js"></script>
</head>
<body>
    <div id="app">
        <router-link to="/login" >登录</router-link>
        <router-link to="/register">注册</router-link>
        <router-view></router-view>
    </div>
    <script>
        // 创建两个子组件 模板对象
        var login = {
            template: "<h3>登录模块</h3>"
        }
        var register = {
            template: "<h3>注册模块</h3>"
        }
        // 创建路由对象
        var routerObj = new VueRouter({
            // 配置路由规则
            routes:[
                {path:"/",redirect:"/login"},
                {path: "/login" , component: login},
                {path: "/register" , component: register}
            ]
        })
        var vm = new Vue({
            el: "#app",
            data: {},
            methods: {},
            router:routerObj
        })
    </script>
</body>
</html>

在这里插入图片描述

接下来我们看下 嵌套路由 的实现。

1、添加两个组件模板

var newc = {
    template:'<h2>新用户登录</h2>'
}
var oldc = {
    template:'<h2>老用户登录</h2>'
}

2、修改登录组件

我们在登录组件中再嵌套一个路由模块，因为内容比较多，所以我们把这个 template 提取出来。

在这里插入图片描述

3、路由 children 使用

接下来我们需要配置嵌套的路由，具体如下：

在这里插入图片描述
注意：通过 children 配置的 path 中的路由地址不能加 “/” 开头。

实现效果：
在这里插入图片描述

路由经典案例

学完了路由嵌套的基础知识，接下来我们通过Router来实现一个经典页面布局的案例，效果如下：

在这里插入图片描述

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.4.3/vue-router.min.js"></script>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        } 
        .header{
            font-size: 40px;
            height: 70px;
            background-color: salmon;
        }
        .contain{
            height: 600px;
            display: flex;
        }
        .left{
            background-color: seagreen;
            flex: 1;
        }
        .right{
            background-color: pink;
            flex: 9;
        }
        .left > div{
            height: 50px;
            border-bottom:1px solid #fff;
            text-align: center;
            line-height: 50px;
            cursor: pointer;
            color:#fff;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="header">看点资讯</div>
        <div class="contain">
            <div class="left">
                <div>
                    <router-link to='/user'>用户管理</router-link>
                </div>
                <div>
                    <router-link to='/article'>文章管理</router-link>
                </div>
            </div>
            <div class="right">
                <router-view></router-view>
            </div>
        </div>
    </div>
    <script>
        // 组件
        let user = {
            template:'<div>用户管理模块</div>'
        }
        let article = {
            template:'<div>文章管理模块</div>'
        }
        // router 路由对象
        let router = new VueRouter({
            routes:[
                {path:"/",redirect:"/login"},
                {path:'/user',component:user},
                {path:'/article',component:article}
            ]
        })
        new Vue({
            el:'#app',
            data: { } ,
            methods: { },
            router,//注册路由
        })
    </script>
</body>
</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^