Vue.js 如何在Vue搜索框中使用查询参数？

我有一个页面，上面有一个使用Vue的搜索框。我想做的是：当用户来自另一个页面时，URL中有一个参数（例如myurl.com/？windows），我捕获该参数并填充搜索字段，以便在页面加载时在该字符串上运行搜索。如果没有参数，则什么也不会发生

我正在使用JavaScript从URL捕获字符串，但不知道如何在输入中获取它以运行搜索。。。。我创建了一个方法，但不知道如何应用它

<div id="app">
<input type="text" v-model="search" placeholder="Search Articles" />
<div v-for="article in filteredArticles" v-bind:key="article.id" class="container-fluid to-edges section1">
    <div class="row">
         <div class="col-md-4 col-sm-12 section0">
            <div class="section0">
                <a v-bind:href="article.url" v-bind:title="toUppercase(article.title)">
                  <img class="resp-img expand section0"
                     v-bind:src="article.src"
                     v-bind:alt="article.alt"/>
                </a>
            </div>
            <div>
                <h3 class="title-sec">{{ article.title }}</h3>
                <p>{{ article.description }}</p>
          </div>
        </div>
    </div>
  </div>
</div>

<script type="text/javascript">
  var pgURL = window.location.href;
  var newURL = pgURL.split("?")[1];
  console.log(newURL);
</script>


// Filters
Vue.filter('to-uppercase', function(value){
    return value.toUpperCase();
});

new Vue({
  el: "#app",
  data: {
    articles: [
      { id: 1, title: 'Trend Alert: Black Windows', category: 'Windows', description: 'Timeless, elegant, and universally flattering, black is an excellent color to add to any wardrobe – or any window. Get in the black with this chic design trend.', src: 'http://i1.adis.ws/i/stock/Trending_Polaroid_Black_Windows_2018_1?$trending-mobile$', url: '/{StorefrontContextRoot}/s/trending/trend-alert-black-windows', alt: 'Pantone Colors image' },
      { id: 2, title: 'Benefits of a Pass-Through Window', category: 'Windows', description: 'Whether you’re adding a pass-through window in order to enjoy an al fresco aperitif or for easier access to appetizers in the kitchen, we’re big fans of bringing the outdoors in.', src: 'http://i1.adis.ws/i/stock/polaroid_benefitsofapassthroughwindow655x536?$trending-mobile$', url: '/{StorefrontContextRoot}/s/trending/kitchen-pass-through-bar-window', alt: 'Benefits of a Pass-Through Window image' }, etc....
    ],
    search: ''
  },
  methods: {
        toUppercase: function(title){
          return title.toUpperCase();
        },
        urlSearch: function(newURL) {
          if (newURL) {
            return this.search = newURL;
          }
        }
  },
  computed: {
    filteredArticles: function() {
      // returning updated array based on search term
        return this.articles.filter((article) => {
        return article.category.match(new RegExp(this.search, "i"));
      });
    }
  }
})

{{article.title}}
{{article.description}}

var pgURL=window.location.href；
var newURL=pgURL.split（“？”[1]；
console.log（newURL）；
//过滤器
Vue.filter（'to-uppercase'，函数（值）{
返回值.toUpperCase（）；
});
新Vue({
el:“应用程序”，
数据：{
文章：[
{id:1，标题：'趋势提示：黑色窗户'，类别：'窗户'，描述：'永恒，优雅，普遍奉承，黑色是一个极好的颜色添加到任何衣柜-或任何窗户。在这个别致的设计趋势中，穿上黑色'，src:'http://i1.adis.ws/i/stock/Trending_Polaroid_Black_Windows_2018_1?$trending mobile$'，url:'/{StorefrontContextRoot}/s/trending/trend alert black windows'，alt:'Pantone Colors image'}，
{id:2，标题：“通过窗户的好处”，类别：“窗户”，描述：“无论你是为了享受al fresco开胃酒还是为了更方便地在厨房享用开胃菜而增加一个通过窗户，我们都是户外活动的忠实粉丝。”src:'http://i1.adis.ws/i/stock/polaroid_benefitsofapassthroughwindow655x536？$trending mobile$'，url:'/{StorefrontContextRoot}/s/trending/kitchen pass through bar window'，alt:'pass through window image的好处'}等。。。。
],
搜索：“”
},
方法：{
toUppercase:函数（标题）{
返回title.toUpperCase（）；
},
urlSearch:函数（newURL）{
if（newURL）{
返回this.search=newURL；
}
}
},
计算：{
filteredArticles:function（）{
//基于搜索项返回更新的数组
返回此.articles.filter（（article）=>{
return article.category.match（新的RegExp（this.search，“i”）；
});
}
}
})

您可以在挂载钩子期间调用

urlSearch

方法：

mounted（）{
this.urlSearch（newURL）
},
方法：{
url搜索（url）{
返回this.search=url
}
},