今天主要记录 vue中命名视图的用法
先奉上官网网址：https://router.vuejs.org/zh/guide/essentials/named-views.html
一般情况下，一个页面里面可能有多个组件，比如侧边栏，内容区，侧边栏是一个组件、内容区是一个组件，我们普遍会将两个组件作为子组件添加到主页面中，因为页面中只有一个
router-view视图，那么问题来了，怎么让一个页面中有多个视图呢，拥有多个视图，很随意，多写几个router-view标签就行了，但是每个router-view视图里面显示的相同的内容，这是一个问题，多写几个视图好像没什么用，那么怎么让一个页面中的多个视图显示不同的内容呢？
下面就来介绍命名视图的作用，首先，一般情况下，我们在路由配置中，一个路由路径只能对应一个组件，若想对应多个组件，必须得作为子组件存在，然后再一个公用的视图内显示，这是一个路由对应多个组件，这些组件对应一个视图
例如：
{ path:'tv', name:'tv', component:Tv, children:[ {path:'',component:Zhonghe}, {path:'zhonghe',component:Zhonghe}, {path:'guochan',component:Guochan}, {path:'yingmei',component:Yingmei}, {path:'riju',component:Riju}, {path:'hanju',component:Hanju} ] },
那么，下面来介绍命名视图：有时候想同时 (同级) 展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar (侧导航) 和 main (主内容) 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default。
<router-view></router-view> <router-view></router-view> <router-view></router-view>
一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。确保正确使用 components配置 (带上 s)：
const router = new VueRouter({ routes: [ { path: 'https://www.jb51.net/', components: { default: Foo, a: Bar, b: Baz } } ] })
解释一下：
在这个默认路由下，
第一个非未命名视图显示Foo组件
第二个name名为a的视图显示Bar组件
第二个name名为b的视图显示Baz组件
然后自己有些了个demo
<template> <div> <ul> <li><router-link to="/list1">list1</router-link></li> <li><router-link to="/list2">list2</router-link></li> <li><router-link to="/list3">list3</router-link></li> </ul> <h6>默认视图</h6> <div> <router-view></router-view> </div> <h6>a视图</h6> <div> <router-view></router-view> </div> <h6>b视图</h6> <div> <router-view></router-view> </div> </div> </template>
router配置：
routes: [ { path: 'https://www.jb51.net/', name: 'HelloWorld', component: HelloWorld, children:[ { path:'', components:{ default:List1, a:List2, b:List3 } }, { path:'list1', components:{ default:List1, a:List2, b:List3 } }, { path:'list2', components:{ default:List2, a:List1, b:List3 } }, { path:'list3', components:{ default:List3, a:List1, b:List2 } } ] } ]
这样会让也面很灵活，可以研究一下
总结
以上所述是小编给大家介绍的vue 中 命名视图的用法 ,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
您可能感兴趣的文章: