48. Vue路由-使用命名视图实现经典布局
时间:2022-07-22
本文章向大家介绍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>
- Java之StringBuffer,StringBuilder,Math,Date,SimpleDateFormat,UUID,File
- React编程思想
- 前台分页,以及类别选择
- 使用angular4和asp.net core 2 web api做个练习项目(二), 这部分都是angular
- 数据库 105道题目整理与吐血总结
- 使用angular4和asp.net core 2 web api做个练习项目(一)
- =.=
- JavaScript经典面试题之for循环click
- 学习docker on windows (1): 为什么要使用docker
- 使用VS Code开发asp.net core (下)
- 使用VS Code开发asp.net core (上)
- 小程序开发总结
- Silverlight Load Client Image 加载客户端图片
- 使用xUnit为.net core程序进行单元测试(4)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Linux笔记(14)| 字符设备驱动基础入门(续)
- scRNAseq包更新动作太大
- Linux笔记(13)| 字符设备驱动基础入门
- 你要的rmarkdown文献图表复现全套代码来了(单细胞)
- 祖传的单个10x样本的seurat标准代码
- 浏览器输入某URL后,HTTP开启了一段奇妙之旅!
- 【Pytorch】笔记一:数据载体张量与线性回归
- 为什么我不再用Redux了
- 【Pytorch 】笔记二:动态图、自动求导及逻辑回归
- 听说国漫最近崛起了,那我们就来爬几部国漫看看(动态加载,反爬)
- 微信小程序开发实战(25):预览图像
- 【Pytorch】笔记三:数据读取机制与图像预处理模块
- 表白利器,马赛克拼贴照片制作
- 【014期】JavaSE面试题(十四):基本IO流
- 微信小程序开发实战(24):选择图像