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 ...
随机推荐
- STM32CubeIDE printf 串口重定向
- Ajax--jQuery使用Ajax
1.jQuery对Ajax操作进行了封装,在jQuery最底层的方法是$.ajax(),第二层是 load() , $.get() 和 $.post(),第三层是 $.getScript() 和 $. ...
- 1.Neo4j简介（Neo4j系列）
简介 Neo4j是一个高性能.高可靠性.可扩展.支持ACID事务的图数据库,它基本由Java语言实现,支持数据平台的平滑扩展和过渡,同时能够在多种系统上完成部署,它使用Cypher查询语言对数据进行增 ...
- L/SQL Developer 和 instantclient客户端安装配置
PL/SQL Developer 和 instantclient客户端安装配置(图文) 一: PL/SQL Developer 安装 下载安装文件安装,我这里的版本号是PLSQL7.1.4.1391, ...
- DotNetSpeech----文本转wave语音文件
wav操作引入dll(DotNetSpeech.dll),引入以后需要选中项目中引入的dll,鼠标右键,选择属性,把“嵌入互操作类型”设置为False.不然会提示无法嵌入互操作类型"Spee ...
- JdbcTemplate常用方法
JdbcTemplate简介 JdbcTemplate是Spring JDBC的核心类,借助该类提供的方法可以很方便的实现数据的增删改查. Spring对数据库的操作在jdbc上面做了深层次的封装,使 ...
- 题解 zr1212 【20WC集训】货币
题目链接 我们给每个连通块图上一种颜色.不同的连通块涂不同的颜色. 首先,我们定义\(f_r\)表示:使\([l,r]\)包括\([1,r]\)里所有颜色的最大的\(l\). 然后我维护一个变量\(p ...
- PV & PVC【转】
Volume 提供了非常好的数据持久化方案,不过在可管理性上还有不足. 拿前面 AWS EBS 的例子来说,要使用 Volume,Pod 必须事先知道如下信息: 当前 Volume 来自 AWS EB ...
- Linux游戏性能再获提升
导读 谈到Linux操作系统,对其有了解的朋友就会知道Linux在服务器.超级计算机等领域表现出色,但在个人电脑领域就远远不如Windows. 尽管近年来Linux的PC系统图形界面越做越好,甚至国内 ...
- Element 以二进制的形式 自定义上传图片
一,只有在上传文件之前的钩子函数中才可以获得最初的文件(文件本身的二进制形式),用以以上传服务器. 还需要使用formdata来承载数据,便于接收 <template> <div ...