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 ...
随机推荐
- 深入 Laravel 资料
深入 Laravel 核心 Learning_Laravel_Kernel laravel 源码详解
- 利用SSH在本机和远程服务器之间传输文件或文件夹
1.从远程服务器上下载文件到本机 scp <服务器用户名>@<服务器地址>:<服务器中要下载的文件路径> <下载到本机的绝对路径> 2.从本机上传本地文 ...
- java并发LockSupport
java并发LockSupport LockSupport是阻塞和唤醒线程的重要类. park()方法使得当前线程阻塞 unpark(Thread thread)唤醒线程 例子 可以把注释取消再执行, ...
- Prometheus组件
Prometheus组件 上一小节,通过部署Node Exporter我们成功的获取到了当前主机的资源使用情况.接下来我们将从Prometheus的架构角度详细介绍Prometheus生态中的各个组件 ...
- 谁说5G网络无敌？第六代Wi-Fi表示不服
导读 随着第五代移动通信技术(5G)正式商用,同属第五代的Wi-Fi技术(802.11ac)的处境就非常尴尬了,除了不存流量费用外,无论是网速.设备连接数还是网络延迟,5G都拥有秒杀802.11ac的 ...
- 「Luogu P2253 好一个一中腰鼓！」
就这道题的理论难度来说绿题是有点低了,但是这道题的实际难度来看,顶多黄题,所以建议加强数据或出数据升级版. 前置芝士 线段树:具体可以看我的另一篇文章. 具体做法 暴力的方法想必都会,所以来讲一下正解 ...
- 6、mysql事务
1.mysql事务 —mysql中,事务其实是一个最小的不可分割的工作单元.事务能够保证一个业务的完整性,例如:银行存款: a - > -100 >update user set ...
- 第一章、ssh安装及远程登入配置
1.Ubuntu下 确认 SSH Server 是否启动 输入: sudo ps -e | grep ssh. 如果正确启动, 命令行中会显示sshd. 安装服务端 OpenSSH Server 输入 ...
- Python对城市距离自动化爬取【必学小型项目】
本地创建数据库,将 excel 数据存储到 city 表中,再取 | 湖北省 | 的所有地级市和县.县级市.区数据作为样表数据记录在样表中.利用 python 的 xlrd 包,定义 proc ...
- Jquery制作插件---内容切换
//需求:点击左右导航箭头,实现内容的切换 //代码如下 <!DOCTYPE html> <html lang="en"> <head> < ...