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

本文主要是介绍vue中使用路由router-view、components渲染实现命名视图实现经典布局，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

实现经典布局

有时，您需要同时显示多个视图而不是嵌套它们，例如，创建包含一个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>