vue2项目为什么vue-router的子路由在父组件里显示使会被副路由组件的样式污染

这是因为vue-router的子路由在父组件里显示时，会被父组件的样式所影响。而当子路由组件又包含了副路由组件时，副路由组件的样式也会被影响到，从而导致样式污染的问题。

为了避免这种问题，可以采取以下措施：

1. 使用scoped样式，让每个组件的样式只在自身内部生效，避免样式污染。
2. 使用CSS Modules，可以为每个组件的样式生成一个唯一的类名，从而避免样式冲突。
3. 使用CSS预处理器，如Sass或Less，可以使用变量、混合等功能，避免样式重复。

总之，在开发过程中应该注意避免样式污染问题，保证组件的样式独立性。

相关问题

vue2中vue-router 路由切换，组件重用挖下的坑是什么？

在Vue2中，vue-router的路由切换会涉及到组件的重用，如果在组件中存在一些未处理好的状态，就会导致一些奇怪的问题，这就是所谓的“组件重用坑”。下面是一些常见的组件重用坑：

1. 未初始化数据：在切换路由时，如果组件中的数据没有被初始化或者被清空了，就会出现一些奇怪的问题。

2. 未解绑事件：在组件中绑定了一些事件，如果在切换路由时没有正确解绑这些事件，就会导致事件重复触发或者无法触发的问题。

3. 滚动条位置：在切换路由时，如果没有正确地处理滚动条位置，就会导致滚动条位置错乱的问题。

4. 生命周期钩子：如果组件中存在一些异步操作，需要在生命周期钩子中进行处理，否则会导致数据不一致或者组件无法正常渲染。

为了避免这些问题的出现，我们可以采取以下措施：

1. 在组件中正确地初始化数据，避免数据未被初始化或被清空的情况。

2. 在组件的销毁钩子中正确地解绑事件，避免事件重复触发或者无法触发的问题。

3. 在切换路由时，正确地处理滚动条位置，避免滚动条位置错乱的问题。

4. 在生命周期钩子中处理异步操作，确保数据一致性和组件的正常渲染。

总之，在使用vue-router时，我们需要仔细处理组件重用的问题，以避免出现一些奇怪的bug。

el-menu router 子路由的组件在父路由打开

如果你想在父路由中打开 `el-menu` 的子路由组件，你需要在子路由的组件中设置 `path` 属性，然后在父路由中使用 `component` 属性来引入这个组件。

例如，假设你有一个名为 `Submenu.vue` 的子路由组件，你可以在该组件中设置 `path` 属性：

const routes = [
  {
    path: '/menu',
    component: Menu,
    children: [
      {
        path: 'submenu',
        component: Submenu
      }
    ]
  }
]

然后在父路由中使用 `component` 属性来引入该组件：

<template>
  <div>
    <el-menu>
      <el-submenu index="1">
        <template slot="title">菜单</template>
        <el-menu-item index="1-1"><router-link to="/menu/submenu">子菜单</router-link></el-menu-item>
      </el-submenu>
    </el-menu>
    <router-view></router-view>
  </div>
</template>

<script>
import Submenu from './Submenu.vue'

export default {
  components: {
    Submenu
  }
}
</script>

这样，当用户点击菜单中的子菜单时，`Submenu.vue` 组件将被加载到父路由的 `router-view` 中。