vue中使用路由router-view、components渲染实现命名视图实现经典布局

最新推荐文章于 2023-09-20 15:03:59 发布

面对疾风ba

最新推荐文章于 2023-09-20 15:03:59 发布

阅读量1.4k

点赞数

分类专栏： vue学习笔记文章标签： vue

本文链接：https://blog.csdn.net/u011608672/article/details/114395718

版权

vue学习笔记专栏收录该内容

36 篇文章 5 订阅

订阅专栏

实现经典布局

有时，您需要同时显示多个视图而不是嵌套它们，例如，创建包含一个sidebar视图和一个main视图的布局。这是命名视图派上用场的地方。您可以在多个视图中命名一个名称，而不是在视图中显示一个名称。router-view不带名称的A将default作为其名称。

一个视图是通过使用组件渲染的，因此，对于同一路线，多个视图需要多个组件。确保使用components（带有s）选项：

<!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">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 导入 vue-router 组件库 -->
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
    <title>Document</title>
    <style>
      .header {
        border: 1px solid red;
      }
  
      .content{
        display: flex;
      }
      .sidebar {
        flex: 2;
        border: 1px solid green;
        height: 500px;
      }
      .rightbox{
        flex: 8;
        border: 1px solid blue;
        height: 500px;
      }
    </style>
</head>
<body>
    <div id="app">
      <router-view></router-view>
      <div class="content">
        <router-view name="a"></router-view>
        <router-view name="b"></router-view>
      </div>
    </div>  
    <script>
    var header = Vue.component('header', {
      template: '<div class="header">header</div>'
    });

    var sidebar = Vue.component('sidebar', {
      template: '<div class="sidebar">sidebar</div>'
    });

    var rightbox = Vue.component('rightbox', {
      template: '<div class="rightbox">rightbox</div>'
    });

    // 创建路由对象
    var router = new VueRouter({
      routes: [
        {
          path: '/', components: {
            default: header,//默认----
            a: sidebar,
            b: rightbox
          }
        }
      ]
    });
  
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      router
    });
    </script>
</body>
</html>

经典布局效果：
在这里插入图片描述

面对疾风ba

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue中使用路由router-view、components渲染实现命名视图实现经典布局

实现经典布局有时，您需要同时显示多个视图而不是嵌套它们，例如，创建包含一个sidebar视图和一个main视图的布局。这是命名视图派上用场的地方。您可以在多个视图中命名一个名称，而不是在视图中显示一个名称。router-view不带名称的A将default作为其名称。一个视图是通过使用组件渲染的，因此，对于同一路线，多个视图需要多个组件。确保使用components（带有s）选项：<!DOCTYPE html><html lang="en"><head>
复制链接

扫一扫

专栏目录