title: How to reload route with nuxtjs
body: <p>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</p>
  
  <pre><code> &lt;template&gt;
    &lt;div&gt;
      &lt;el-container&gt;
        &lt;el-header&gt;
          &lt;div class="logo"&gt;
            &lt;img src="../static/logo.png" /&gt;
          &lt;/div&gt;
          &lt;form&gt;
            &lt;input type="text" name="q" v-model="q"&gt;
            &lt;button type="submit" @click.stop.prevent="submit()"&gt;Submit&lt;/button&gt;
          &lt;/form&gt;
       &lt;/el-header&gt; 
       &lt;el-main&gt;
        &lt;nuxt/&gt;     
      &lt;/el-main&gt;
      &lt;el-footer&gt;&lt;/el-footer&gt;
      &lt;/el-container&gt;    
    &lt;/div&gt;  
  &lt;/template&gt;
  
  &lt;script&gt;
    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);
        }
      },
    }
  &lt;/script&gt;
  &lt;style&gt;
  .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;
  }
  
  &lt;/style&gt;
  </code></pre>
  
  <p>Search Page</p>
  
  <pre><code>&lt;template&gt;
      &lt;h2&gt;{{searchResults}}&lt;/h2&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    export default {
      data() {
        return {
          searchResults:''
        };
      },
      methods: {
  
      },
      mounted: function() {
          var q = this.$route.query.q
          this.searchResults = q;
      },
    }
  &lt;/script&gt;
  </code></pre>