单击Nuxt中的后退按钮时，如何滚动到左侧列表中的正确项目？

Question

• 我有一个在SSR模式下使用Nuxt动态路由的列表详细视图
• 带有溢出-y的列表显示在左侧，单击项目时，内容显示在右侧
• 当我单击每个项目时，URL参数会更改，并且新项目将显示在右侧
• 当我按下后退按钮时，显示上一项，但滚动条未更改
• 如何使滚动条转到上一个项目？
• 这里是显示问题的GIF，单击返回时，列表应滚动到上一个项目

<template>
  <div class="root">
    <div class="left">
      <ul>
        <li v-for="i in sortedArticles" :key="i.feedItemId">
          <nuxt-link :to="'/articles/' + i.feedItemId" :id="i.feedItemId" no-prefetch>{{ i.title }}</nuxt-link>
        </li>
      </ul>
    </div>
    <div class="right">Article {{ $route.params.id }}</div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  key(route) {
    return 'articles'
  },
  computed: {
    ...mapGetters({
      sortedArticles: 'news/SORTED_ARTICLES'
    })
  },
}
</script>

<style>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  line-height: 1.8;
}
.root {
  display: flex;
  flex-direction: row;
  height: 100vh;
}
.left {
  flex: 1;
  overflow-y: auto;
}
.left ul {
  list-style-type: none;
}
.left li a {
  display: block;
  text-decoration: none;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid #eee;
  color: black;
}
.left li a:hover {
  color: darkorange;
}

.right {
  flex: 1;
}
</style>

上面的代码是pages / articles__id.vue文件如何在NUXT中实现此目标

Answer 1

您必须使用watch：