如何使用 nuxtjs 重新加载路由

Question

我对 Vuejs 和 NuxtJS 还很陌生。现在我正在使用 nuxt js 构建一个带有服务器端渲染的应用程序。 我有一个带有“搜索输入”的容器布局，我希望当用户在搜索页面上输入内容时，它必须显示输入，如果我在搜索页面上并且我输入并提交表单它也应该带我到搜索页面 下面是两页。容器页面和搜索页面

 <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>

搜索页面

<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

因此，您所寻找的内容被称为 Programattic 导航，而且操作起来相当简单Here's the offical docs for it。在用户搜索或发生生命周期钩子时执行的方法内部，您可以简单地编写：

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

这将使路由器导航到所需的位置。

请注意，您不应在示例中返回此内容。

具体来说：

 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();
  },

在这里，您将返回 this.$route.push("/search?q="+ this.q);，这使您处于尚未实际运行这段代码而是将其返回到 void 的状态。

Answer 2

要刷新当前视图，请尝试以下操作：

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