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 ...
随机推荐
- 标准模板库中的队列(queue)
//C++数据结构与算法(第4版) Adam Drozdek 著 徐丹 吴伟敏<<清华大学出版社>> 队列容器默认由deque实现,用户也可以选择list容器来实现.如果用 ...
- 一套完整的javascript面试题(转)
一.单选题1.以下哪条语句会产生运行错误:(a)A.var obj = ();//语法错误B.var obj = [];//创建数组C.var obj = {};//创建对象D.var obj = / ...
- Gcd&Exgcd
欧几里得算法: \[gcd(a,b)=gcd(b,a\bmod b)\] 证明: 显然(大雾) 扩展欧几里得及证明: 为解决一个形如 \[ax+by=c\] 的方程. 根据裴蜀定理,当且仅当 \[gc ...
- uWSGI, Thread, time.sleep 使用问题
下面的问题,在flask程序独立运行中,都没有问题,但是部署在 uwsgi 上表现异常: 1. 在http请求处理过程中,产出异步线程,放在线程池中,线程的启动时间有比较明显的延迟. 2. 在异步线程 ...
- Navicat导入json文件到数据库
最近做小程序商城系统,物流管理这块需要存储国际和中国的物流地址. 所以,天哪,地址那么的多!!!! www.baidu.com,搜索大佬是如何做的.有的是通过访问阿里云快递物流api接口获取数据存入数 ...
- memcached 和 redis 性能测试比对
网上很多关于memcached 和 redis 区别的介绍,大部分都是说redis比memcached支持的数据类型多的话题,而性能比对确很少,我专门针对两者进行了性能测试比对. 测试内容如下: 两者 ...
- vue axios 数据请求实现
1.安装nginx npm install axios --save-dev cnpm install axios --save-dev 使用淘宝镜像 保存依赖文件到本地 装好了.packjson.j ...
- vs2010编译C++ 友元函数
// CTest.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> #include &l ...
- Noip2018普及组初赛试题解题报告
解题思路: 一.单项选择题 (答案:DDDBBAAAABABBBB) 1.除D外,其余均为输入设备. 2.除D外,其余都等于(617)10 ,D选项为(619)10. 3.1MB=1024KB=102 ...
- Day 4 -E - Catenyms POJ - 2337
A catenym is a pair of words separated by a period such that the last letter of the first word is th ...