How to reload route with nuxtjs

Question

I am fairly new to Vuejs and NuxtJS. right now i am building an app with sever side rendering using nuxt js. I have a container layout with a "search input" and i wanted that when a user enters something on the it takes to me to the search page and on the search page it must show the input, and if i am on the search page and i enter and submit form it should also taken me to the search page Below are two pages. container page and Search page

 <template>
  <div>
    <el-container>
      <el-header>
        <div class="logo">
          <img src="../static/logo.png" />
        </div>
        <form>
          <input type="text" name="q" v-model="q">
          <button type="submit" @click.stop.prevent="submit()">Submit</button>
        </form>
     </el-header> 
     <el-main>
      <nuxt/>     
    </el-main>
    <el-footer></el-footer>
    </el-container>    
  </div>  
</template>

<script>
  export default {  
    data() {
      return {
        activeIndex: '1',
        activeIndex2: '1',
        searchQuery:'',
        a:'',
        q : ''
      };
    },
    methods: {
      submit(){
        console.log($nuxt.$route.name)

        //return location.reload();
         //if you want to send any data into server before redirection then you can do it here
        return this.$router.push("/search?q="+ this.q);
        //
        //this.$forceUpdate();
      },

      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      }
    },
  }
</script>
<style>
.el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    width:100%;
    padding: 0;
  }
  .el-header{    
    height:100px !important;
    line-height: 100px !important;;
  }
.el-header, .el-footer {
    background-color: #303952;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
.logo img{
  height:40px;
  width:auto;  
}

.logo{
  position: relative;
  float:left;
  top:10px;
}

/* Add media queries for responsiveness - when the screen is 500px wide or less, stack the links on top of each other */ 
@media screen and (max-width: 500px) {

}

.bg-purple{
  background: red;
  height:23px;
}

html {
  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  word-spacing: 1px;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
}

</style>

Search Page

<template>
    <h2>{{searchResults}}</h2>
</template>

<script>
  export default {
    data() {
      return {
        searchResults:''
      };
    },
    methods: {

    },
    mounted: function() {
        var q = this.$route.query.q
        this.searchResults = q;
    },
  }
</script>

Answer 1

To refresh your current view, try something like:

this.$router.push(
  {
    path: this.$route.path,
    force: true,
    query: {
      param1: 'value 1',
      param2: 'value 2',
    },
  },
  () => {
    this.$router.app.refresh()
  }
)

Answer 2

So what your looking for is known as Programattic navigation and is fairly simple to do Here's the offical docs for it. Inside of the method you are executing when a user searchs or a life cycle hook occurs you can simple write:

this.$router.push('/path/to/what/i/want');

This will then make the router navigate to the desiered location.

Note you shouldn't be returning this in your example.

Specfically:

 submit(){
    console.log($nuxt.$route.name)

    //return location.reload();
     //if you want to send any data into server before redirection then you can do it here
    return this.$router.push("/search?q="+ this.q);
    //
    //this.$forceUpdate();
  },

Here you will be returning back this.$route.push("/search?q="+ this.q); Which leaves you in a state where you haven't actually ran this piece of code but rather returned it into the void.