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 ...
随机推荐
- S7-300 符号IO域的组态 HMI变量指针化的方法以及应用，在一个IO域显示多个温度值的办法
应用工业场景 例如需要测试很多个节点的温度值的时候,需要监控的位置很多,如果HMI的画面很小, 可以使用符号IO域和变量的间接寻址 符号IO域接近于VB中的combo 控件 实现上图的界面 : 上图界 ...
- LeetCode206. Reverse Linked List(反转链表)
题目链接:https://leetcode.com/problems/reverse-linked-list/ 方法一:迭代反转 https://blog.csdn.net/qq_17550379/a ...
- ASM ClassReader failed to parse class file
ASM ClassReader failed to parse class file - probably due to a new Java class file version that isn' ...
- android 桌面透明
目录(?)[-] public void setWallpaperOffsetSteps float xStep float yStep Parameters public void setWal ...
- 「SP2713」GSS4 - Can you answer these queries IV
传送门 Luogu 解题思路 区间开方以及区间求和. 考虑用线段树来做. 开方操作看似没有任何结合律可言,但这题有另外一个性质: 一个数的初始值不超过 \(10^{18}\) ,而这个数被开方6次左右 ...
- IntelliJ如何设置自动导包
idea 关于自动导包的设置 标签: idea 2016-09-30 18:10 400人阅读 评论(0) 收藏 举报 本文章已收录于: .embody{ padding:10px 10px 10px ...
- CTE With as 递归调用
WITH AS的含义 WITH AS短语,也叫做子查询部分(subquery factoring),可以让你做很多事情,定义一个SQL片断,该SQL片断会 被整个SQL语句所用到.有的时候,是为了 ...
- 实验吧-杂项-64格(64进制--base64索引)
下载gif,Winhex打开发现文件头缺失,加上文件头GIF89得到正常图片,用帧分解工具把每一帧分解. 图片主要是一个8×8的方格,好像没什么线索,把每一帧图片上小黄人的占格的位置数出: 17 54 ...
- 吴裕雄--天生自然JAVA面向对象高级编程学习笔记：宠物商店实例分析
interface Pet{ // 定义宠物接口 public String getName() ; public String getColor() ; public int getAge() ; ...
- 《新标准C++程序设计》4.5（C++学习笔记15）
实例:长度可变的整型数组类 int main() { //要编写可变长整型数组类,使之能如下使用: CArray a; //开始里的数组是空的 ; i < ; ++i) a.push_back( ...