vue路由跨组件呈现

vue 路由如何将路由导航中的位置呈现在另一个平级的兄弟组件中。

在 Vue 路由中，可以使用 <router-view> 组件来动态渲染匹配到的组件。如果需要在跨多个组件呈现某个组件，可以将该组件嵌套在多个父组件的模板中，并在这些父组件的模板中使用 <router-view> 组件来渲染该组件。

下面是一个简单的示例，展示了如何在多个父组件中呈现同一个子组件：

在路由配置中，声明一个名为 hello 的路由，对应的组件为 HelloWorld：

const routes = [
  { path: '/hello', name: 'hello', component: HelloWorld }
]

在多个父组件的模板中，使用 <router-view> 组件来渲染该路由对应的组件：

<!-- 在 App.vue 中 -->
<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<!-- 在 Home.vue 中 -->
<template>
  <div class="home">
    <h1>Home</h1>
    <router-view></router-view>
  </div>
</template>

<!-- 在 About.vue 中 -->
<template>
  <div class="about">
    <h1>About</h1>
    <router-view></router-view>
  </div>
</template>

现在，当访问 /hello 路由时，HelloWorld 组件就会被渲染并呈现在 App.vue、Home.vue 和 About.vue 组件中。

这有个类似的问题, 你可以参考下: https://ask.csdn.net/questions/7629633
你也可以参考下这篇文章：vue在路由过程中，改变导航栏的单个点击样式的问题。
除此之外, 这篇博客: vue载入速度优化（打包放服务器后加载很慢）中的 把我优化vue载入速度的问题总结一下。 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
我的博客项目放在服务器后加载要18-20秒，其实这个问题拖了很久了，昨天才有时间处理一下。
之前以为是首页的mp4资源太大，但昨天看了后发现主要是vue打包后的js文件载入用了最多时间，如下图（优化前没截图，这个是优化后的。优化前大小是2m多，时间是十几秒）

带宽合格的服务器其实2m的文件用不到十几秒的，但我买的带宽是1Mbps （穷是原罪），速度太慢。
那么就从优化文件大小入手。
步骤：
您还可以看一下陶新华老师的Vue实战-模版建站课程中的【第九课】使用组件搭建考拉首页，并对组件进行优化小节, 巩固相关知识点

以下回答由chatgpt基于相关博客总结生成:

我可以为您提供一些提示和建议。首先，您可以在导航栏中设置一个动态的路由参数，用来存储当前路由的位置信息。然后，在兄弟组件中使用作用域插槽来获取该参数，并在页面中展示出来。

具体步骤如下：

在导航栏中设置动态路由参数。

例如，您可以设置一个名为“position”的路由参数，用来存储当前路由的位置信息。您可以在Vue路由配置中进行如下设置：

const router = new VueRouter({
  routes: [
    {
      path: '/home',
      name: 'Home',
      component: Home,
      meta: {
        position: '首页'
      }
    },
    {
      path: '/about',
      name: 'About',
      component: About,
      meta: {
        position: '关于我们'
      }
    },
    // 其他路由配置...
  ]
})

因为设置的是动态参数，所以需要在路由元信息（meta）中进行设置。

在需要展示位置信息的兄弟组件中使用作用域插槽。

例如，在您需要展示位置信息的兄弟组件中，可以使用如下的模板代码：

<template>
  <div>
    当前位置：{{position}}
  </div>
</template>

<script>
export default {
  name: 'SiblingComponent',
  props: ['position']
}
</script>

注意，这里的“position”需要从父组件中通过作用域插槽传递进来。

在导航栏中获取并传递位置信息。

在导航栏组件中，可以使用Vue路由提供的导航守卫中的“afterEach”函数，来获取当前路由的位置信息，并将其传递给需要展示位置信息的兄弟组件。

例如，在您的导航栏组件中，可以编写如下代码：

export default {
  name: 'Navbar',
  components: {
    // 导航栏组件
  },
  methods: {
    // 在路由跳转后，获取当前页面的位置信息，并将其传递给兄弟组件
    setPositionInfo () {
      let currentRoute = this.$router.currentRoute
      let position = currentRoute.meta ? currentRoute.meta.position : ''
      this.$emit('updatePosition', position)
    }
  },
  mounted () {
    // 监听路由跳转事件
    this.$router.afterEach(() => {
      this.setPositionInfo()
    })
    // 页面初始化时，主动获取当前页面的位置信息，并将其传递给兄弟组件
    this.setPositionInfo()
  }
}

在父组件中使用导航栏和兄弟组件。

最后，在您的父组件中，可以将导航栏和需要展示位置信息的兄弟组件进行组合，具体方式与使用普通组件的方式相同。

例如：

<template>
  <div>
    <!-- 导航栏组件 -->
    <Navbar @updatePosition="position=$event"/>

    <!-- 兄弟组件 -->
    <SiblingComponent :position="position"/>
  </div>
</template>

<script>
import Navbar from './Navbar.vue'
import SiblingComponent from './SiblingComponent.vue'

export default {
  name: 'ParentComponent',
  components: {
    Navbar,
    SiblingComponent
  },
  data () {
    return {
      position: ''
    }
  }
}
</script>

这样，就可以在兄弟组件中展示当前路由的位置信息了。

希望这些提示和建议能够对您有所帮助。

vue路由 跨组件 呈现

vue路由跨组件呈现