用了路由css也改变了父组件怎么办

在使用路由时，如果你的子组件中的CSS样式影响了父组件，可以考虑使用CSS模块化来解决这个问题。CSS模块化是一种将CSS样式作用域限制在组件内部的技术，可以有效地避免CSS样式的命名冲突问题。

在Vue中使用CSS模块化，可以在<style>标签中添加scoped属性，例如：

  .example {
    color: red;
  }
</style>```

这样，在组件中定义的CSS样式只会影响到当前组件，不会影响到其他组件或全局样式。

另外，如果你的CSS样式确实需要影响到父组件或全局样式，可以使用/deep/或>>>选择器（在Vue 3中使用::v-deep选择器）。例如：

.example /deep/ .parent {
color: red;
}
</style>```

这样，.example选择器会作用于当前组件，而/deep/ .parent选择器会作用于当前组件的父组件中的.parent元素。注意，/deep/或>>>选择器只在scoped属性存在时才生效。

相关问题

router-link 刷新时路由重定向样式没改变

如果你使用 `router-link` 组件进行路由跳转时，刷新页面时样式没有改变，可能是因为你没有给相应的路由设置 `active-class` 或 `exact-active-class` 属性。

你可以在 `router-link` 标签上设置 `active-class` 或 `exact-active-class` 属性来指定路由激活时应该使用的样式类名，例如：

<router-link to="/" active-class="active">首页</router-link>

这里我们将 `active-class` 属性设置为 "active"，这意味着当路由的路径与当前页面的路径匹配时，该链接将被标记为 "active"。你可以在 CSS 中定义 "active" 类的样式。

如果你希望只有完全匹配当前路由路径时，该链接才被标记为 "active"，你可以使用 `exact-active-class` 属性：

<router-link to="/" exact-active-class="active">首页</router-link>

这里我们将 `exact-active-class` 属性设置为 "active"，这意味着只有当路由的路径完全匹配当前页面的路径时，该链接才被标记为 "active"。

vue router路由改变后样式查询加载

当Vue Router路由发生改变后，可以在`mounted`和`updated`生命周期钩子函数中使用`$nextTick`方法来获取路由信息并加载对应的样式。例如，可以在Vue组件中添加以下代码：

mounted() {
  this.loadStyles()
},
updated() {
  this.loadStyles()
},
methods: {
  loadStyles() {
    const currentPath = this.$route.path
    const links = document.getElementsByTagName('link')
    for (let i = 0; i < links.length; i++) {
      const link = links[i]
      if (link.rel === 'stylesheet' && link.getAttribute('data-path') && link.getAttribute('data-path') !== currentPath) {
        link.parentNode.removeChild(link)
      }
    }
    const head = document.getElementsByTagName('head')[0]
    const link = document.createElement('link')
    link.rel = 'stylesheet'
    link.type = 'text/css'
    link.href = `/styles/${currentPath}.css`
    link.setAttribute('data-path', currentPath)
    head.appendChild(link)
  }
}

这段代码中，首先获取当前路由的路径，然后遍历页面中的所有link标签，如果该标签的rel属性值为stylesheet并且该标签的data-path属性值不等于当前路由路径，则从页面中删除该标签。接着，创建一个新的link标签，并将其href属性设置为当前路由路径对应的样式文件路径，最后将该标签添加到head标签中即可。