如何为Vue router-link添加query参数，实现从通知跳转至文章评论？

Hey there! Let's tackle your Vue Router questions step by step, and adjust your notification component code to meet your needs.

First off, Vue Router's router-link lets you pass query parameters directly in the :to binding object. The target component can then read these parameters from $route.query and handle navigation to the desired section (like an anchor or specific element).

Here's the core flow:

• Add a query property to the route object you return in your navigation method
• In the target component, use lifecycle hooks (like mounted) or watchers for $route changes to act on the query parameters
• For scrolling to a specific element, use scrollIntoView() once the target element exists in the DOM

Your API returns the anchor and comment ID, and since comments load after the article, we need to do two key things:

1. Pass the comment ID (and anchor if needed) as query parameters in the router-link
2. In the show_post component, wait for comments to finish loading before scrolling to the target comment

Step 1: Update your notification component's linkFromNotification method #

Modify the method to include query parameters for comment-related notification types. I'll assume your API returns comment_id and anchor fields (adjust the field names to match your actual API response):

<template>
  <div>
    <span>
      <i class="g-font-size-18 g-color-gray-light-v1"></i>
    </span>
    <!-- Fixed the click handler: call readNotification with the item's ID instead of reusing the link method -->
    <router-link :to="linkFromNotification(item)" @click.native="readNotification(item.id)">
      <p>
        <span v-html="item.message"></span>
      </p>
    </router-link>
  </div>
</template>
<script>
import {mapActions, mapGetters} from 'vuex'
export default {
  props: ['item'],
  computed: {
    ...mapGetters([
      'getNotifications'
    ])
  },
  methods: {
    ...mapActions([
      'readNotification'
    ]),
    linkFromNotification (item) {
      if (item.notification_type === 'user_subscribed') {
        return {name: 'person', params: {id: item.object_id}}
      } else if (['comment_created', 'answer_selected', 'answer_created'].includes(item.notification_type)) {
        // Add query parameters for comment ID and anchor
        return {
          name: 'show_post',
          params: {id: item.object_id},
          query: {
            commentId: item.comment_id, // Adjust field name to match your API
            anchor: item.anchor // Include if you need the anchor value
          }
        }
      } else if (item.notification_type === 'user_coauthored') {
        return {name: 'show_post', params: {id: item.object_id}}
      }
    }
  }
}
</script>

Step 2: Handle scrolling to the comment in the show_post component #

Since comments load after the article, we need to wait for them to render in the DOM before scrolling. Use a watcher for $route (to handle in-page navigation between comments) and either $nextTick or wait for your comments API to resolve:

<script>
export default {
  // ... other component options
  mounted() {
    this.scrollToTargetComment()
  },
  watch: {
    // Re-run scroll logic if the route query changes (e.g., navigating between comments on the same article)
    $route: 'scrollToTargetComment'
  },
  methods: {
    async scrollToTargetComment() {
      const commentId = this.$route.query.commentId
      if (!commentId) return

      // If your comments load via an API call, await that first
      // await this.loadArticleComments() // Uncomment this if you have a comment loading method

      // Wait for the DOM to update with comments
      await this.$nextTick()

      // Target the comment element (assuming your comments have IDs like `comment-123`)
      const commentElement = document.getElementById(`comment-${commentId}`)
      if (commentElement) {
        // Smooth scroll to the comment, centered in the viewport
        commentElement.scrollIntoView({ behavior: 'smooth', block: 'center' })
      }
    }
  }
}
</script>

Key Notes: #

• Ensure your comment elements have unique IDs that match the commentId from the query (e.g., id="comment-{{ comment.id }}" in your comment template)
• If comments load asynchronously, replace $nextTick with a wait for your API promise to resolve—this guarantees the comment exists in the DOM before scrolling
• The scrollIntoView options let you tweak scrolling behavior (smooth vs instant, element alignment, etc.)

内容的提问来源于stack exchange，提问作者Olga B