vue 多视图

川长思鸟来 2021-07-25 01:46 398阅读 0赞

1、命名视图的显示
    	<router-view name='组件名'></router-view>
    	<router-view name='组件名'></router-view>
    	<router-view ></router-view>
    	
    2、因为是在一个页面显示,路径唯一,所以组件都是一个路由中的组件
    	    {
    		      path: '/',
    		      name: 'HelloWorld',
    		      components:{
    		        组件名:A,
    		        组件名:B,
    		        default:C
    		     }
    		 }
    		 当来到'/'页面时,视图会显示对应组件内容,未命名的视图用default:组件,来匹配

代码示例:  
App.vue文件:

<template>
      <div id="app">
        
        <router-view name='nav'></router-view>
        
        <router-view name='aside'></router-view>
        
        <router-view></router-view>
      </div>
    </template>
    
    <script>
    
    export default { 
      name: 'App',
      data()
      { 
        return{ 
    
        }
      }
    }
    </script>
    
    <style scoped >
    
    *{ 
      margin:0;
      padding: 0;
    }
    
    
    </style>

总路由文件:

import Vue from 'vue'
    import Router from 'vue-router'
    import HelloWorld from '@/components/HelloWorld'
    import A from '@/components/A'
    import B from '@/components/B'
    import C from '@/components/C'
    
    Vue.use(Router)
    
    export default new Router({ 
      routes: [
        { 
          path: '/',
          name: 'HelloWorld',
          components:{ 
            nav:A,
            aside:B,
            default:C
          }
        }
      ]
    })

发表评论取消回复

表情：

评论列表（有 0 条评论，398人围观）

还没有评论，来说两句吧...

相关阅读

相关 MySQL视图的使用与多表视图查询

MySQL视图是一种虚拟的表，它是基于查询结果的表的可视化表示。视图提供了一种简化和抽象化数据库查询的方式，可以隐藏复杂的查询逻辑，简化数据访问，并提供了一致性和安全性的控制。

╰+攻爆jí腚メ/ 2023年10月10日 19:26/ 0 赞/ 42 阅读

相关【Vue Router】006-命名视图

1.6 命名视图 1.6.1 概述有时候需要同时（同级）显示多个视图，而不是嵌套显示。比如创建一个布局，有 header 头部、sidebar 侧边栏、main

港控/mmm°/ 2023年10月01日 11:34/ 0 赞/ 7 阅读

相关 vue中使用命名视图，在一个页面显示多个视图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpbmdl

梦里梦外;/ 2023年07月18日 02:59/ 0 赞/ 19 阅读

相关 SpringMVC 多视图配置

这些天一直想做一个报表，但是报表使用的页面是jsp的，前台我主要是html页面，但是现在我也想用jsp页面，我应该如何来进行配置在springMVC-servlet.xml

超、凢脫俗/ 2023年06月27日 03:43/ 0 赞/ 19 阅读

相关 SpringMVC多视图配置

最近在springmvc上集成velocity，磕磕绊绊，总算是有所收获，在此记录一下。 Velocity是一种易用的模板语言。Velocity将Java代码从Web

ゞ浴缸里的玫瑰/ 2022年07月13日 14:53/ 0 赞/ 197 阅读

相关多视图几何---基础矩阵

目录一、基础矩阵(Fundamental Matrix) 1、对极几何 2、基础矩阵推导二、实现结果三、实现代码四、问题 ----------------

「爱情、让人受尽委屈。」/ 2022年02月19日 16:41/ 0 赞/ 622 阅读

相关 vue-router—6命名视图

改写一下 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2

悠悠/ 2022年01月21日 10:49/ 0 赞/ 236 阅读

相关解决vue视图不渲染

动态添加对象属性 //声明 var travelMainVueObj; travelMainVueObj = new Vue({

阳光穿透心脏的1/2处/ 2021年12月05日 04:37/ 0 赞/ 352 阅读

相关 vue 多视图

1、命名视图的显示 <router-view name='组件名'></router-view> <router-view name='组件名'><

川长思鸟来/ 2021年07月25日 01:46/ 0 赞/ 399 阅读

相关 AngularJs ui-router多视图嵌套子视图

1、通过.或parent的方式创建子路由 2、在父路由的模板中添加容器标签并添加ui-view='x'设置子路由显示位置 3、在子路由的views中'x

谁借莪１个温暖的怀抱￠/ 2021年07月24日 15:47/ 0 赞/ 434 阅读