Vue中router-view的复用

Bertha 。 2022-02-28 01:46 351阅读 0赞

1. router-view的复用：一个路由页面显示多个路由组件

比如：home路由页面，同时显示Home路由组件和Academic路由组件

router.js中配置：

{
          path: '/home',
          name: 'home',
          components: {
            default: Home,//首页默认显示Home路由组件
            'academic': Academic, // 首页还可以显示别的路由组件，比如Academic路由组件
          }
        },

home页面中本来要显示Home路由组件的，此时如下配置，也会显示Academic路由组件：

<template>
      <div id="app">
        
        <div class="header">
          <div class="center">
            <div class="logo">
              <img src="./assets/logo.png" alt="">
            </div>
            <ul class="nav">
              <router-link to="/home" tag="li">Home</router-link>
              <router-link to="/about" tag="li">About</router-link>
              <router-link to="/learn" tag="li">Learn</router-link>
              <router-link to="/study" tag="li">Study</router-link>
              <router-link :to="{name: 'community'}" tag="li">Community</router-link>
          </ul>
          </div>
        </div>
    
        <router-view class="router-view"/>
        <router-view class="router-view" name="academic"/>
        <div class="footer"></div>
      </div>
    </template>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70]: /images/20220228/25ea714dcef845ed8db88f3ca253e0e6.png

发表评论取消回复

表情：

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

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

相关阅读

相关 VueRouter源码（三）--RouterView， RouterLink

注册为vue组件 RouterView 和RouterLink组件在install方法中注册成了Vue的组件 function install (Vue) ...

分手后的思念是犯贱/ 2024年04月18日 20:03/ 0 赞/ 132 阅读

相关 Vue可复用的过渡

可复用的过渡过渡可以通过 Vue 的组件系统实现复用。要创建一个可复用过渡组件，你需要做的就是将 `<transition>` 或者 `<transition-...

拼搏现实的明天。/ 2024年04月17日 05:35/ 0 赞/ 97 阅读

相关 Vue可复用解决方案

目录一. 自定义指令 1.1.全局指令 1.2.局部指令 1.3.指令参数二. Mixin混入 2.1.基本用法 2.2. 混入优先级 2.3.全局 Mix

淡淡的烟草味﹌/ 2024年04月06日 12:06/ 0 赞/ 126 阅读

相关 Java中类的复用

类的复用（组合与继承）第一种方法：只需在新类中产生现有类的对象，新类由现有类组成，也称为组合，该方法只是复用了现有程序代码的功能；第二种方法：按现有类来创建新类，无需改

淡淡的烟草味﹌/ 2024年03月31日 17:58/ 0 赞/ 75 阅读

相关 Vue-不同路由的组件复用

场景还原当某个场景中vue-router从/post-page/a，跳转到/post-page/b。然后我们惊人的发现，页面跳转后数据竟然没更新？！原因是vue-route

本是古典何须时尚/ 2023年07月21日 05:26/ 0 赞/ 59 阅读

相关 Vue表格组件复用

复用的原则，将DOM的操作交给开发者，比如表头和表体，而封装只是将，样式和一些通用的方法进行封装。目前想法是通过插槽进行实现，表格外框的内容是固定的，但是表头和表体是通

待我称王封你为后i/ 2023年05月31日 12:25/ 0 赞/ 40 阅读

相关 JavaScript中的代码复用

目录模式1：原型继承模式2：复制所有属性进行继承模式3：混合（mix-in）

曾经终败给现在/ 2022年11月21日 06:56/ 0 赞/ 190 阅读

相关打造 Vue.js 可复用组件

> Vue.js 是一套构建用户界面的渐进式框架。我们可以使用简单的 API 来实现响应式的数据绑定和组合的视图组件。从维护视图到维护数据，Vue.js 让我们快速地开发应

深碍√TFBOYSˉ_/ 2022年09月30日 07:16/ 0 赞/ 230 阅读

相关 vue13-解决标签复用问题

首先看下面代码 <!DOCTYPE html> <html lang=en> <head> <meta charset

「爱情、让人受尽委屈。」/ 2022年05月10日 00:52/ 0 赞/ 239 阅读

相关 Vue中router-view的复用

1. router-view的复用：一个路由页面显示多个路由组件比如：home路由页面，同时显示Home路由组件和Academic路由组件 router.js中配置：

Bertha 。/ 2022年02月28日 01:46/ 0 赞/ 352 阅读