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

因此，您所寻找的东西称为“程序化导航”，并且操作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);，这使您处于实际上没有运行这段代码，而是将其返回到空白的状态。

如何使用nuxtjs重新加载路由

1 个答案: