📝 [doc] Reset scrollBar after switching page route

[QJvic]

🤔 Nature of this PR

• 🐛 bug fix
• ✨ new feature
• 📝 documentation improvement
• 🛝 demo code improvement
• 🚀 component style/interaction improvement
• 🏗️ ci/cd improvement
• ♻️ refactoring
• 🎨 code style optimization
• ✅ test cases
• 🔀 branch merging
• 💡 other

🔗 Related Issue

#71

💡 Background and Solution

Reset the scrollBar of the root dom in doc.vue and main.vue to position (0, 0).

✅ Pre-merge Checklist

❗️Please self-check and check all options.❗️

• Documentation is supplemented or not needed
• Code demonstration is provided or not needed
• TypeScript definitions are supplemented or not needed
• Changelog is provided or not needed

[higuaifan]

🤔How about use router guards?(just discussing)

It is better to add comments to new files.

[QJvic]

If use router guards like below, it works fine now, but may cause some hidden bugs in the future. Because if adding anchors in the future, the url will look like http://xxxx.xxx/#any-anchor. When switching anchor rather than page route, the below code will be triggered too. It's not correct. 😕

const router = useRouter();
router.beforeEach(async (to,from,next) => {
  await nextTick();
  domRef.value?.scroll(0, 0);
  next();
})

So the safe code should be like below.

const router = useRouter();
router.beforeEach(async (to,from,next) => {
  if(to.path !== from.path) {
    await nextTick();
    domRef.value?.scroll(0, 0);
  }
  next();
})

I think it's less succinct than

const route = useRoute();
watch(() => route.path, async () => {
  await nextTick();
  domRef.value?.scroll(0, 0);
});

---

Ok, I will add comments. 👨‍🎓