vue路由 视图命名
<body>
<div id="app">
<p @click="go">hello app!</p>
<p @click="pas">back path</p>
<router-view name="a"></router-view>
<router-view name="b"></router-view>
</div> </body>
<script>
const Foo = { template: '<div>foo</div>' };
const Baz = { template: '<div>test</div>' };
const Aaz = { template: '<div>Aaz</div>' };
const router = new VueRouter({
routes : [
{
path: '/',
components: {
default: Foo,
a: Baz,
b: Foo
}
},
{
path: '/home',
components: {
default: Foo,
a: Foo,
b: Aaz
}
}
]
}); const app = new Vue({
router,
methods:{
go(){
router.push({
path: '/home'
});
},
pas(){
router.push({
path: '/'
});
}
}
}).$mount('#app');
一个页面里面可以多视图，不同的链接可以导航到同一个页面，但是页面可以根据参数渲染不同的组件形式
vue路由 视图命名的更多相关文章
- vue 路由视图，router-view嵌套跳转
实现功能:制作一个登录页面,跳转到首页,首页包含菜单栏.顶部导航栏.主体,标准的后台网页格式.菜单栏点击不同菜单控制主体展示不同的组件(不同的页面). 配置router-view嵌套跳转需要准备两个主 ...
- Vue学习笔记【29】——Vue路由（命名视图实现经典布局）
命名视图实现经典布局 标签代码结构: <div id="app"> <router-view></router-view> < ...
- Vue路由-命名视图实现经典布局
Vue路由-命名视图实现经典布局 相关Html: <!DOCTYPE html> <html lang="en"> <head> <met ...
- VueJs(11)---vue-router（命名路由，命名视图，重定向别名，路由组件传参）
vue-router 上篇文章讲了第一篇vue-router相关文章,文章地址:VueJs(10)---vue-router(进阶1) 一.命名路由 有时候,通过一个名称来标识一个路由显得更方便一些, ...
- Vue 路由的简单使用(命名路由、query路由传参、params路由传参)
1 # Vue 路由 2 # 1.理解:一个路由(toute)就是一组映射关系(key-value),多个路由需要路由器(router)进行管理 3 # 2.前端路由:key是路径,value是组件 ...
- Vue路由vue-router
前面的话 在Web开发中,路由是指根据URL分配到对应的处理程序.对于大多数单页面应用,都推荐使用官方支持的vue-router.Vue-router通过管理URL,实现URL和组件的对应,以及通过U ...
- 14.vue路由&脚手架
一.vue路由:https://router.vuejs.org/zh/ 1.定义 let router = new VueRouter({ mode:"history/hash" ...
- 初印象至Vue路由
初印象系列为快速了解一门技术的内容,后续会推出本人应用这门技术时发现的一些认识. Vue路由和传统路由的区别: Vue路由主要是用来实现单页面应用内各个组件之间的切换,同样支持传递参数等功能.而传统路 ...
- Vue 路由详解
Vue 路由详解 对于前端来说,其实浏览器配合超级连接就很好的实现了路由功能.但是对于单页面应用来说,浏览器和超级连接的跳转方式已经不能适用,所以各大框架纷纷给出了单页面应用的解决路由跳转的方案. V ...
随机推荐
- Oracle 提取数据表信息
参考: https://www.progress.com/blogs/jdbc-tutorial-extracting-database-metadata-via-jdbc-driver http:/ ...
- jQuery EasyUI window窗口实例
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>j ...
- redis学习笔记-01：redis简介
1.redis是一个高性能的Nosql数据库,遵守BSD协议,使用c语言编写.支持网络.可基于内存亦可持久化,是一种日志型.Key-Value数据库,也可看做是一个分布式的.基于内存的缓存工具. 2. ...
- Day10 - D - 矿场搭建 HYSBZ - 2730
煤矿工地可以看成是由隧道连接挖煤点组成的无向图.为安全起见,希望在工地发生事故时所有挖煤点的工人都能有一条出路逃到救援出口处.于是矿主决定在某些挖煤点设立救援出口,使得无论哪一个挖煤点坍塌之后,其他挖 ...
- rem布局js脚本代码
目前代码在750屏幕分辨率下是十倍 基本上使用iphone是375宽度 所以就是20倍 图片背景可以使用二倍图 (function (doc, win) { var docEl = doc.docum ...
- lambda表达式-很好---《转载》
Lambda表达式详解 前言 1.天真热,程序员活着不易,星期天,也要顶着火辣辣的太阳,总结这些东西. 2.夸夸lambda吧:简化了匿名委托的使用,让你让代码更加简洁,优雅.据说它是微软自c#1.0 ...
- Java设计模式之适配器模式（Adapter）
通常,在代码已经存在的情况下编写客户端代码(客户端就是需要调用我们代码的对象),开发人员可以采取模拟客户端的方式调用我们提供的接口对象.然而,客户端代码也可能与你的代码单独进行开发,这种情况下,会发现 ...
- LR_问题_平均响应时间解释，summary与analysis不一致----Summary Report中的时间说明
Summary是按整个场景的时间来做平均的,最大最小值,也是从整个场景中取出来的. (1) 平均响应时间:事物全部响应时间做平均计算 (2) 90%响应时间:将事物全部响应时间 ...
- POJ1471 Tree/洛谷P4178 Tree
Tree P4178 Tree 点分治板子. 点分治就是直接找树的重心进行暴力计算,每次树的深度不会超过子树深度的\(\frac{1}{2}\),计算完就消除影响,找下一个重心. 所以伪代码: voi ...
- SCHema学习
<?xml version="1.0" encoding="UTF-8"?> <xs:schema xmlns:xs="http:/ ...