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>
- 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 数组属性和方法
- lerna 包管理器
- 解决React前端在开发环境的跨域问题
- Java垃圾回收之jconsole分析
- Spring Boot 系列:日志动态配置详解
- Js电子时钟
- 函数的定义和调用
- this指向
- 严格模式
- 闭包与高阶函数
- IDEA设置maven修改settings.xml配置文件无法加载仓库
- 在Linux下如何根据域名自签发OpenSSL证书与常用证书转换 修改openssl.cnf配置文件创建根证书自签发泛域名证书将crt转pem格式生成 p12 格式的
- CAS 原子操作
- FlutterDojo设计之道—状态管理之路(七)
- Kubernetes K8S之存储ConfigMap详解 通过目录创建通过文件创建通过命令行创建通过yaml文件创建当前存在的ConfigMap使用ConfigMap
- Material Components——Shape的处理