Vue router 一个路由对应多个视图
使用命名路由
https://jsfiddle.net/posva/6du90epg/
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
<h1>Named Views</h1>
<ul>
<li>
<router-link to="/">/</router-link>
</li>
<li>
<router-link to="/other">/other</router-link>
</li>
</ul>
<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>
</div>
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
const Baz = { template: '<div>baz</div>' }
const router = new VueRouter({
mode: 'history',
routes: [
{ path: '/',
// a single route can define multiple named components
// which will be rendered into <router-view>s with corresponding names.
components: {
default: Foo,
a: Bar,
b: Baz
}
},
{
path: '/other',
components: {
default: Baz,
a: Bar,
b: Foo
}
}
]
})
new Vue({
router,
el: '#app'
})
Vue router 一个路由对应多个视图的更多相关文章
- Vue 中的Vue Router一级路由,二级路由,三级路由以及跳转
今天编写了一下Vue中的路由 先用命令行新建一个空的项目,并且我知道要用路由,就下载了路由的相关依赖 vue init webpack demo5 完毕之后进入所在的项目 cd demo5 之后用vs ...
- vue router引入路由与路由配置容易犯错的地方与常见的报错与处理报错
首先npm安装vue-router插件,就不说了其次: 先看下我本地的目录结构吧 第一步:在src目录下新建一个专门存放router的index.js文件里面的内容为: import Vue from ...
- Vue router 全局路由守卫
记录一下全局路由守卫的使用: 方法一:定义一个数组用于检测与管理需要登录的页面,全局路由守卫配合本地存储判断是否跳转 import Vue from 'vue' import Router from ...
- vue router动态路由
<div id="#app"> <router-link to="/user/header">路由1</router-link&g ...
- VUE 同一页面路由参数变化,视图不刷新的解决方案
1.监听路由处理 watch: { $route(to, from) { // 逻辑 // 重新调用数据接口 } }, 2.beforeRouteUpdate导航守卫 路由更新时触发 beforeRo ...
- [Vue 牛刀小试]:第十三章 - Vue Router 基础使用再探(命名路由、命名视图、路由传参)
一.前言 在上一章的学习中,我们简单介绍了前端路由的概念,以及如何在 Vue 中通过使用 Vue Router 来实现我们的前端路由.但是在实际使用中,我们经常会遇到路由传参.或者一个页面是由多个组件 ...
- Vue.js 2.x笔记:路由Vue Router(6)
1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Rout ...
- vue教程(五)--路由router介绍
一.html页面中如何使用 1.引入 vue-router.js 2.安装插件 Vue.use(VueRouter) 3.创建路由对象 var router = new VueRouter({ // ...
- Vue.js路由管理器 Vue Router
起步 HTML <script src="https://unpkg.com/vue/dist/vue.js"></script> <script s ...
随机推荐
- 读取 android sys/下的信息
读取 android sys/下的信息 https://github.com/ruw/Internet-Services-projects/tree/master/OffloadPredictor/l ...
- Spring Mvc如何通过注解的方式设置视图解析器的优先级
<bean id="jspViewResolver" class="org.springframework.web.servlet.view.InternalRes ...
- Java文件管理系统
上一个版本设计参照了 windows 资源管理器的原则,使用了多年.也发现了少许问题,也许是我们应用场景不一样... 目前的设计结合了目前的云概念.目录采用的是虚拟方式和实际的目录无关,只是存在一定的 ...
- 为什么不能用memcached存储Session
Memcached创建者Dormando很早就写过两篇文章[1][2], 告诫开发人员不要用memcached存储Session.他在第一篇文章中给出的理由大致是说,如果用memcached存储Ses ...
- ExtJS 4.2 教程-08:布局系统详解
ExtJS 4.2 系列教程导航目录: ExtJS 4.2 教程-01:Hello ExtJS ExtJS 4.2 教程-02:bootstrap.js 工作方式 ExtJS 4.2 教程-03:使用 ...
- [Android P] Android P版本 新功能介绍和兼容性处理(一)
cp from :https://blog.csdn.net/yi_master/article/details/80046696 Android P版本已经到来,首篇我们当然要先看下Android ...
- Orchard模块开发全接触8:改造后台
后台默认提供了 Content 的管理,但是,所有的内容类型揉杂在一起,而我们需要更深度的定制一些功能,比如,我们只想管理订单,又比如,我们需要对注册用户进行管理.本篇的内容包括: 1:自定义 adm ...
- VMware vSphere中的HA工作原理介绍
http://blog.51cto.com/linkinsds/416738 HA全称High Availability.它是VMware的企业应用环境中用来保障企业级应用的不间断运行需求所产生的一个 ...
- [转]使用PHPExcel判别和格式化Excel中的日期格式
From : http://renzhen.iteye.com/blog/799391 最近,在做一个导入功能,在系统中使用PHPExcel类库,读取上传的Excel文件,然后进行字段映射,最后将Ex ...
- 构造读写IRP(转)
DDK示例中的代码. NTSTATUSFltReadSectors( IN PDEVICE_OBJECT DeviceObject, OUT PVOID Buffer, IN ULONG Len ...