router路由切换后样式没渲染，刷新才好

这可能是因为路由切换后，你的样式表没有被重新加载。你可以尝试使用以下方法来解决这个问题：

1. 在你的路由切换逻辑中，手动触发样式表的重新加载。例如，在Vue.js中，你可以在路由切换前使用`beforeEach`钩子函数来触发样式表的重新加载：

router.beforeEach((to, from, next) => {
  // 重新加载样式表
  Array.from(document.getElementsByTagName('link')).forEach(link => {
    link.href = link.href
  })
  next()
})

2. 使用webpack的`style-loader`和`css-loader`插件来自动刷新样式表。这种方法需要你在webpack的配置文件中进行配置。具体操作可以参考以下代码：

// webpack.config.js
{
  // ...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }
}

使用这种方法，当你的路由切换时，样式表会自动重新加载。

希望这些方法能够帮助你解决问题！

相关问题

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

如果你在使用 `router-link` 进行路由跳转时，页面刷新后样式没有改变，那么可能是因为你的路由配置中缺少了 `mode: "history"` 的配置。

在使用 `history` 模式时，路由跳转不会刷新整个页面，而是只会改变 URL，并且使用浏览器的 `history.pushState()` 方法来实现页面的前进和后退。

如果你没有设置 `mode: "history"`，那么路由跳转会使用默认的 `hash` 模式，这种模式下，每次路由跳转都会在 URL 中添加一个 `#` 号，页面会刷新并重新加载所有资源，因此你的样式也会重新加载，看起来就像没有改变一样。

因此，为了让你的路由跳转不刷新页面并且能够正确地改变样式，你需要在路由配置中添加 `mode: "history"` 的配置，例如：

const router = new VueRouter({
  mode: "history",
  routes: [
    // ...
  ]
})

这样，你的 `router-link` 跳转就可以不刷新页面并且能够正确地改变样式了。

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"。