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

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

需求

在前面的路由篇章中，我在写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>

更多精彩原创Devops文章，快来关注我的公众号：【Devops社群】吧：