简体   繁体   English

如何使用查询从Vue路由器链接重定向?

[英]how to redirect from vue router-link using query?

How to add a query to the router-link so the user will be redirected to the comment under a post by clicking on the link from the notification? 如何在路由器链接中添加查询,以便通过单击通知中的链接将用户重定向到帖子下的评论?

API gives us an anchor of the notification and id of the comment. API为我们提供了通知的anchor和评论的id When the DOM renders a page, it loads a post firstly, then comments. 当DOM呈现页面时,它首先加载帖子,然后评论。

Here is a component of the notification: 这是通知的组成部分:

<template>
 <div>
  <span>
   <i class="g-font-size-18 g-color-gray-light-v1"></i>
    </span>
     <router-link :to="linkFromNotification(item)
                  @click.native="linkFromNotification(item.notification_type)">
    <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)) {
      return {name: 'show_post', params: {id: item.object_id}}
    } else if (item.notification_type === 'user_coauthored') {
      return {name: 'show_post', params: {id: item.object_id}}
     }
    }
   }
  }
 </script>

If you mean url queries you can use key query in the object you are returning, If you mean a hash "#" to be added to the link you can use the key hash. 如果您指的是url查询,则可以在返回的对象中使用键查询;如果您指的是将哈希“#”添加到链接中,则可以使用键哈希。 for example: 例如:

{name: 'person', params: {id: item.object_id}, query:{name:"Mohd"}, hash:"214"}

Reference 参考

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM