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>
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>
- 1 For anyone dealing with this, look into Nuxt's watchQuery. – Kalnode Commented Jan 20, 2021 at 2:02
2 Answers
Reset to default 4To 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()
}
)
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.