Vue中router-view的复用

Bertha 。 2022-02-28 01:46 264阅读 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 条评论，264人围观）

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

相关阅读

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

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

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

相关 Vue可复用的过渡

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

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

相关 Vue可复用解决方案

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

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

相关 Java中类的复用

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

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

相关 JavaScript中的代码复用

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

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

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

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

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

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

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

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

相关 Vue中router-view的复用

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

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

相关 vue----webpack模板----组件复用解决方法

组件复用当前组件被复用（没有被销毁或者创建）的时候，路径会发生改变，但是，值不会发生改变因为：created(){}接收值，但是created

淩亂°似流年/ 2021年12月23日 10:17/ 0 赞/ 214 阅读

相关 vue复用组件不刷新的解决方案

vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路

素颜马尾好姑娘i/ 2021年10月19日 05:48/ 0 赞/ 682 阅读