vue 滚动条 router-view

vue-router 自带的 scrollBehavior 可以用来管理滚动条的位置。这个函数需要记住 scrollTop 然后还原，但是管理这个 scrollTop 显得很麻烦，有的时候还不容易取值。另外，还可以使用纯 CSS 的方式，在列表页面放置一个 router-view，在详情页面利用 position ... 的方式实现滚动效果。

在配置路由规则的时候，可以在 router 下的 index.js 文件中设置 mode 的值为 "history"，来使用 HTML5 history 模式。

在 main.js 文件中，可以通过引入路由，将路由挂载到整个项目中。这样可以监听地址栏的改变，并根据地址栏的变化，修改项目中的 router-view 组件应该加载的组件。

相关问题

<template> <div class="box"> <el-container> <el-header class="tou"> <myhead></myhead> </el-header> <el-container> <el-aside class="zuo"> <myleft></myleft> </el-aside> <el-container> <el-main class="you"> <router-view></router-view> </el-main> </el-container> </el-container> </el-container> </div> </template> <script scoped > import myhead from "../components/myhead.vue" import myleft from "../components/myleft.vue" export default { components: { myhead, myleft, } } </script> <style> .box { height: calc(100vh - 60px); width: 100vw; display: flex; min-width: 700px; overflow-y: hidden; } body { overflow-x: hidden; margin-left: 0px; margin-top: 0px; } .tou { height: 50px; background-color: rgb(0, 0, 0); } .zuo { width: 200px; height: 100%; overflow-y: scroll; } .you { flex: 9; height: 100%; background: #f9ffb9; position: fixed; width: 100%; float: left; margin-left: -100px; } </style> zuo的滚动条拉不动

抱歉，我的建议有误。你的代码中，`.zuo` 元素的高度已经被正确计算，可以出现滚动条。但是，你在 `.you` 元素中设置了 `position: fixed;` 样式，导致它脱离了普通文档流，覆盖在了 `.zuo` 元素上方，导致无法操作 `.zuo` 元素的滚动条。

你可以尝试把 `.you` 元素的 `position` 属性改为 `absolute`，并且在 `.qb` 元素上添加 `position: relative;` 样式，这样就可以让 `.you` 元素相对于 `.qb` 元素定位，不会遮盖 `.zuo` 元素了。

vue router切换 appmain 出现滚动条

当在Vue Router中切换页面并进入`appmain`组件时，如果新页面的内容高度大于`appmain`容器的高度，可能会导致`appmain`区域出现滚动条。这是因为默认情况下，路由切换会创建一个新的视图层，并将内容渲染到该层，如果没有设置好滚动处理，浏览器就会自动添加滚动条以适应内容。

解决这个问题通常有几种方式：

1. **固定`appmain`高度**：如果你能预知内容最大高度，可以在CSS中给`appmain`设置一个固定的最小高度，例如：

   .appmain {
     min-height: calc(100vh - 60px); /* 或者根据实际需要计算 */
     overflow-y: auto;
   }

2. **使用`.vue-router-view`替代**：Vue Router 2.x之后提供了一个自定义的指令`<router-view>`，你可以将其放在滚动区域内，而不是直接替换整个`appmain`。这样可以更好地控制滚动行为。

3. **动态高度调整**：如果内容高度不确定，可以考虑使用`v-if`或`v-show`配合`keep-alive`缓存已经加载过的组件，避免频繁渲染带来的滚动条问题。

4. **监听路由变化**：在`mounted`生命周期钩子中检查滚动位置，并根据内容高度调整`appmain`的样式。