欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-11-16 08:23:17
今天主要记录  vue中命名视图的用法 先奉上官网网址: 一般情况下,一个页面里面可能有多个组件,比如侧边栏,内容区,侧边栏是一个组件、内容区是一个组件,我们...

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

先奉上官网网址:

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

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 class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>

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

const router = new vuerouter({
 routes: [
  {
   path: '/',
   components: {
    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',
    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 中 命名视图的用法 ,希望对大家有所帮助