vueRouter-命名视图

2019独角兽企业重金招聘Python工程师标准>>>

有时候想同时展示多个视图，而不是嵌套展示，例如创建一个布局，有sidebar(侧导航)和（主内容）2个视图，这个时候命名视图就派上用场了。
你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口，如果router-view没有设置名字，那么就默认为default
<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>
一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件，确保正确使用components

<body class=""><script src="../js/vue.js"></script><script src="../js/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><script>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: "/",components: {default: Foo,a: Bar,b: Baz}},{path: "/other",components: {default: Baz,a: Bar,b: Foo}}]})const app = new Vue({ router }).$mount("#app")</script>
</body>

转载于:https://my.oschina.net/u/2612473/blog/1535681

vueRouter-命名视图相关推荐

vue-router详尽：编程式导航、路由重定向、动态路由匹配、路由别名、嵌套路由、命名视图
vue-router编程式导航在vue项目中经常用到this.$router.push() 和 this.$router.replace() 方法进行路由跳转就是编程式导航... 通俗理解编程式导航 ...
前端技术分享：教你玩转vue-router命令视图
在使用VUE开发的项目中,我们为了减少代码冗余和方便后期维护,我们会将一些公共区域封装为一个公共组件,需要时直接调用即可.但是相对于NavBar导航栏.Tabbar标签栏几乎每个页面都需要使用的公共组 ...
教你玩转vue-router命令视图
在使用VUE开发的项目中,我们为了减少代码冗余和方便后期维护,我们会将一些公共区域封装为一个公共组件,需要时直接调用即可.但是相对于NavBar导航栏.Tabbar标签栏几乎每个页面都需要使用的公共组 ...
vue-router命名路由
vue-router命名路由为了更加方便的表示路由的路径,可以给路由规则起一个别名,即为"命名路由". <!DOCTYPE html> <html lang=& ...
sql server(MsSql)字段命名,表命名,视图命名,SQL语句书写参考
@[TOC](sql server(MsSql)字段命名,表命名,视图命名,SQL语句书写参考) 对我个人来说,字段命名,表命名,视图命名,SQL语句书写都有一套自己的习惯,可以减少维护成本.减少不必 ...
Vue Router 命名路由、（嵌套）命名视图
命名路由在Vue Router中除了 path 之外,还可以为任何路由提供 name. const routes = [{path: '/user/:username',name: 'user', ...
vue-router导入视图文件方式与打包参数的差异
vue-cli-service在打包webpack项目时,由于vue router导入视图文件的写法不同,打包的参数npm run build:dev | npm run build:prod引起的页 ...
vue学习笔记——路由
1 路由配置在vue.config中配置,则在代码中可以使用 @来表示src目录下 import aa from '@/aa/index.js' 2 单页面可以懒加载 3 创建动态路由路由中定义: ...
Vue Router 实现路由控制实战
本文是我在学习过程中记录学习的点点滴滴,目的是为了学完之后巩固一下顺便也和大家分享一下,日后忘记了也可以方便快速的复习. Vue Router 实现路由控制实战前言一.什么是单页面应用及实现前端路 ...
问题记录——sqlserver视图重命名的陷阱
今日,在更新网站数据库的时候出现问题,程序生成的更新脚本中有个视图名称很怪异的被修改. 经过查看,发现了问题所在:通过管理界面对视图重命名后,系统表syscomments中的视图名称记录并没有相应改变 ...

vueRouter-命名视图

vueRouter-命名视图相关推荐

最新文章

热门文章