vue 中命名视图的用法实例详解

网络编程 2021-07-04 15:51www.168986.cn编程入门

这篇文章主要介绍了vue 中命名视图的用法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧

今天主要记录 vue中命名视图的用法

先奉上官网网址

一般情况下，一个页面里面可能有多个组件，比如侧边栏，内容区，侧边栏是一个组件、内容区是一个组件，我们普遍会将两个组件作为子组件添加到主页面中，因为页面中只有一个

router-view视图，那么问题来了，怎么让一个页面中有多个视图呢，拥有多个视图，很随意，多写几个router-view标签就行了，每个router-view视图里面显示的相同的内容，这是一个问题，多写几个视图好像没什么用，那么怎么让一个页面中的多个视图显示不同的内容呢？

狼蚁网站SEO优化就来介绍命名视图的作用，，一般情况下，我们在路由配置中，一个路由路径只能对应一个组件，若想对应多个组件，必须得作为子组件存在，然后再一个公用的视图内显示，这是一个路由对应多个组件，这些组件对应一个视图

例如

{
　　path:'tv',
　　name:'tv',
　　ponent:Tv,
　　children:[
　　　　{path:'',ponent:Zhonghe},
　　　　{path:'zhonghe',ponent:Zhonghe},
　　　　{path:'guochan',ponent:Guochan},
　　　　{path:'yingmei',ponent:Yingmei},
　　　　{path:'riju',ponent:Riju},
　　　　{path:'hanju',ponent:Hanju}
　　]
},

那么，狼蚁网站SEO优化来介绍命名视图有时候想 (同级) 展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar (侧导航) 和 main (主内容) 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 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>

一个视图使用一个组件渲染，对于同个路由，多个视图就需要多个组件。确保正确使用 ponents配置 (带上 s)

const router = new VueRouter({
 routes: [
  {
   path: '/',
   ponents: {
    default: Foo,
    a: Bar,
    b: Baz
   }
  }
 ]
})

解释一下

在这个默认路由下，

第一个非未命名视图显示Foo组件

第二个name名为a的视图显示Bar组件

第二个name名为b的视图显示Baz组件

然后自己有些了个demo

<template>
　　<div class="hello">
　　　　<ul class="nav">
　　　　　　<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 class="view">
　　　　　　<router-view></router-view>
　　　　</div>
　　　　<h6>a视图</h6>
　　　　<div class="view">
　　　　　　<router-view name="a"></router-view>
　　　　</div>
　　　　<h6>b视图</h6>
　　　　<div class="view">
　　　　　　<router-view name="b"></router-view>
　　　　</div>
　　</div>
</template>

router配置

routes: [
　　{
　　　　path: '/',
　　　　name: 'HelloWorld',
　　　　ponent: HelloWorld,
　　　　children:[
　　　　　　{
　　　　　　　　path:'',
　　　　　　　　ponents:{
　　　　　　　　　　default:List1,
　　　　　　　　　　a:List2,
　　　　　　　　　　b:List3
　　　　　　　　}
　　　　　　},
　　　　　　{
　　　　　　　　path:'list1',
　　　　　　　　ponents:{
　　　　　　　　　　default:List1,
　　　　　　　　　　a:List2,
　　　　　　　　　　b:List3
　　　　　　　　}
　　　　　　　},
　　　　　　　{
　　　　　　　　path:'list2',
　　　　　　　　ponents:{
　　　　　　　　　　default:List2,
　　　　　　　　　　a:List1,
　　　　　　　　　　b:List3
　　　　　　　　}
　　　　　　},
　　　　　　{
　　　　　　　　path:'list3',
　　　　　　　　ponents:{
　　　　　　　　　　default:List3,
　　　　　　　　　　a:List1,
　　　　　　　　　　b:List2
　　　　　　　　}
　　　　　　}
　　　　]
　　}
]

这样会让也面很灵活，可以研究一下

以上所述是长沙网络推广给大家介绍的vue 中命名视图的用法 ,希望对大家有所帮助，如果大家有任何疑问请给我留言，长沙网络推广会及时回复大家的。在此也非常感谢大家对狼蚁SEO网站的支持！
如果你觉得本文对你有帮助，欢迎网络推广网站推广转载，烦请注明出处，谢谢！

上一篇：如何对react hooks进行单元测试的方法下一篇：详解vue 命名视图

vue 中命名视图的用法实例详解

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设

vue 中 命名视图的用法实例详解

编程语言

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设

vue 中命名视图的用法实例详解