48. Vue路由-使用命名视图实现经典布局

Devops海洋的渔夫

发布于 2020-07-22 15:47:33

5530

发布于 2020-07-22 15:47:33

文章被收录于专栏：Devops专栏Devops专栏

需求

在前面的路由篇章中，我在写router-view的时候并没有什么特征标识，也就是所有路由映射的组件都可以显示出来。但是在一些经典后台布局中，一般什么组件在哪里显示是需要固定好的，如下：

image-20200222225250892

那么这时候就需要命名视图了，基本语法：<router-view name="视图名称"></router-view>

好了，下面来写一个小例子。

示例

1.首先编写三个首页组件

        <script>
            // 1. 定义 (路由) 组件。

            // 创建header组件
            var header = {
                template: '<h1 class="header">header组件</h1>',
            }

            // 创建left组件
            var left = {
                template: '<h1 class="left">left组件</h1>',
            }

            // 创建main组件
            var main = {
                template: '<h1 class="main">main组件</h1>',
            }

在创建了这三个区域的组件之后，下面就是考虑如何在首页一个路由/下定义这三个组件。

2.定义三个组件同一个路径的路由规则

            // 2. 定义路由
            var routes = [{
                path: '/',
                // 单个路径可以配置多个组件
                components: {
                    'default': header, // 默认router-view的命名
                    'left': left,
                    'main': main,
                },
            }]

3.设置三个组件在`app`中的使用

        <div id="app">

            <!-- default命名视图 -->
            <router-view></router-view>
            <div class="container">
                <!-- left左侧栏命名视图 -->
                <router-view name="left"></router-view>
                <!-- main中心位置的命名视图 -->
                <router-view name="main"></router-view>
            </div>

        </div>

4.浏览器显示如下：

image-20200222233813421

那么剩下的工作就是设置一下样式，将这三个组件布局一下即可。

5.设置样式布局

        <style>
            html,
            body {
              margin: 0;
              padding: 0;
            }

            .header {
              background-color: orange;
              height: 80px;
            }

            h1 {
              margin: 0;
              padding: 0;
              font-size: 16px;
            }

            .container {
              display: flex;
              height: 900px;
            }

            .left {
              background-color: lightgreen;
              flex: 2;
            }

            .main {
              background-color: lightpink;
              flex: 8;
            }
        </style>

布局显示如下：

image-20200222234116870

6.完成示例代码如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!-- 导入vue.js库  -->
        <script src="lib/vue.js"></script>
        <!-- 导入vue-router -->
        <script src="lib/vue-router.js"></script>
        <style>
            html,
            body {
              margin: 0;
              padding: 0;
            }

            .header {
              background-color: orange;
              height: 80px;
            }

            h1 {
              margin: 0;
              padding: 0;
              font-size: 16px;
            }

            .container {
              display: flex;
              height: 900px;
            }

            .left {
              background-color: lightgreen;
              flex: 2;
            }

            .main {
              background-color: lightpink;
              flex: 8;
            }
        </style>
    </head>
    <body>

        <div id="app">

            <!-- default命名视图 -->
            <router-view></router-view>
            <div class="container">
                <!-- left左侧栏命名视图 -->
                <router-view name="left"></router-view>
                <!-- main中心位置的命名视图 -->
                <router-view name="main"></router-view>
            </div>

        </div>

        <script>
            // 1. 定义 (路由) 组件。

            // 创建header组件
            var header = {
                template: '<h1 class="header">header组件</h1>',
            }

            // 创建left组件
            var left = {
                template: '<h1 class="left">left组件</h1>',
            }

            // 创建main组件
            var main = {
                template: '<h1 class="main">main组件</h1>',
            }


            // 2. 定义路由
            var routes = [{
                path: '/',
                // 单个路径可以配置多个组件
                components: {
                    'default': header, // 默认router-view的命名
                    'left': left,
                    'main': main,
                },
            }]

            

            // 3. 创建 router 实例，然后传 `routes` 配置
            // 你还可以传别的配置参数, 不过先这么简单着吧。
            var router = new VueRouter({
                routes, // (缩写) 相当于 routes: routes
            })

            // 创建vue的实例
            var vm = new Vue({
                el: '#app',
                data: {},
                methods: {},
                // 注册局部组件，注意：下面使用vue-router的话，不需要在这里注册组件
                components: {},
                // 将路由规则对象，注册到 vm 实例上，用来监听 URL 地址的变化，然后展示对应的组件
                router, // 等价于 router: router
            })
        </script>

    </body>
</html>

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

app