Question

我有一个导航栏，并且有一个文本字段，用户可以按标签搜索帖子。如果用户输入1-3个标签，则书面标签将存储在标签数组中。

我在navbar组件中的router-link看起来像这样：（仅相关部分）

<router-link :to="{name:'posts', props:{searchTags: tags}}">
         <button type="button" v-if="this.tags.length > 0"
               class="...">Search
         </button>
</router-link>

routes.js中的是我的帖子路线（routes.js的重要片段）

 routes: [
        {
            path: "/posts",
            component: posts,
            name: 'posts'
        },
    ]

导航栏应将标签数组发送到posts组件。不幸的是我做不到。

posts组件，将发布请求发送到获取最新帖子的API。但是我希望在传递标签时，不要获取最新的帖子，而仅获取带有某些标签的帖子。但是首先我必须以某种方式获取标签。

我试图用“ this。$ props.searchTags”和其他东西来获得它们。不幸的是结果总是“未定义”。

export default {
        name: "posts",
        props: {
           searchTags: Array,
           required: false
        },
        data: function () {
            return {
                apiUrl: '/getPosts',
                ....              
                tags: [this.searchTags],
            }
        },
        methods: {
            getPosts: function (url) {
                this.$http.get(url).then(function (data) {
                       // blabla                           
                });
            },
            getPostsByTags: function() {                
                      //
            }, 
        },
        created() {
            if(this.$props.searchTags == null)
                  this.getPosts(this.apiUrl);
            else 
                  this.getPostsByTags(bla);
        },
    }

Answer 1

路由器链接to属性接受string or Location作为值。位置对象没有props属性。
相反，可以使用params将数据发送到路由组件：

<router-link 
  :to="{ name: 'posts', params: { searchTags: tags } }"
>
...
</router-link>

这样，可以通过目标组件内部的searchTags访问值为tags赋值的this.$route.params.searchTags。

因此，以上示例的created钩子应更新为：

created () {
  if (!this.$route.params.searchTags) {
    this.getPosts(this.apiUrl);
  } else {
    this.getPostsByTags(bla);
  }                  
},

Answer 2

尝试在路线定义中添加props: true

routes: [
    {
        path: "/posts",
        component: posts,
        name: 'posts',
        props: true
    },
]

VueJ使用来自<router-link>的道具

2 个答案: