[Vue3.0 actual combat step-by-step series] Vue router is introduced. With the help of routing, click the submit button to jump to the questionnaire result page

[thousands of words long text, stay up late to update, original is not easy, a lot of support, thank you]

preface

Hello, guys, hello. In the previous article, we have implemented the submission function of the questionnaire. After completing the questionnaire and clicking submit, the questionnaire results will be displayed in the console. However, this form is obviously unfriendly to users. Some users even don't know how to open the console. It gives the impression that there is no response when they click the submit button, they can't see the submission results, and they don't know whether they have submitted successfully. In this sharing, we will continue to go deeper along the previous article. With the help of Vue router, after clicking the submit button, the carrier's questionnaire results will jump to a new "questionnaire results" page and show the results to users.

Install and configure routing

Because this sharing will involve page Jump, we will introduce Vue router to realize page Jump with the help of routing control.

  • First, install the latest version of Vue router (NPM install Vue)- router@4 ), if router is checked when creating the project, it indicates that it has been installed. This step can be omitted
  • Create a router directory under the src directory of the project to store routing related files
  • Create a new index.js file in the router directory created above
  • Open index.js and import the two methods in Vue router at the top. createRouter and createWebHashHistory are used to create a route object and a route in hash mode respectively
  • Import components that need routing control, such as questionnaire page component (Home.vue) and result page component (result.vue)
  • Configure the routing information corresponding to different components
  • Call the createRouter method to create a routing object and export it by default
  • Finally, you need to import the routing object created above in main.js and apply it to the vue instance
  • router/index.js source code display
import { createRouter, createWebHashHistory } from 'vue-router'
import Home from '../Home.vue'

const routes = [
	{
		path:'/',
		name: "Home",
		component: Home
	},
	{
		path: '/result',
		name: 'Result',
		component: () => import(/*webChunkName: "Result"*/ '../result.vue')
	}
]
const router = createRouter({
	history:createWebHashHistory(),//Routing with hash mode
	routes
})
export default router;
  • main.js modification
//Add code
import router from './router'
//Modify code
createApp(App).use(router).mount('#app')

Modify App.vue component

Because we will control the display and jump of the page through the route, we need to transform the App.vue component:

  • Delete the original Home component in App.vue
  • Add two new routing labels to the template:
    • Router link: hyperlink label used to control route jump
    • Router view: used to display the page content corresponding to the route

The modified source code is as follows:

<template>
	<router-link to="/">questionnaire</router-link>
	<router-view />
</template>
export default {
	setup(){}
}

Modify the Home.vue component

There are not many changes to the Home.vue component. There are mainly two steps: add a title "Questionnaire" to the template, realize route jump in the submit button, and carry the results as parameters

  • Modify the template of the component and add an h1 tag at the top of the page to display the title: "Questionnaire"
  • Import the useRouter method of the route in JavaScript code. (since vue instances cannot be accessed through this in vue 3.0, routing information cannot be obtained through this. $route and this. $route, but the corresponding vue route provides us with two corresponding methods, useRoute and useRoute, to replace them.)
  • In the setup method, we call the useRouter method to get the router object.
  • In the submit method of the submit button, the route jump is realized through the push method of the router object, and the questionnaire result is passed to the questionnaire result page as a parameter. (Note: in the previous article, we saved the questionnaire results into an object. Since the object cannot be directly passed as a parameter, we need to convert the results into JSON string with the help of JSON.stringify method, and then pass them.)
<template>
	<!--...ellipsis-->
	<div class="main">
		<div style="text-align:center">
			<h1>questionnaire investigation</h1>
		</div>
		<!--...ellipsis-->
	</div>
</template>
//... omitted
import {useRouter} from 'vue-router'

setup(){
	//... omitted
	const router = useRouter();
	const submit = ()=>{
		router.push({
			name:'Result', //Route name configured in route
			query:{
				result:JSON.stringify(result)
			}
		})
	}
	//... omitted
}

Create a new questionnaire result page result.vue

Add a new result.vue page to display the questionnaire results. This page is relatively simple. You only need to get the questionnaire results from the routing parameters and display them on the page. In order to make the page not too ugly, we need to simply add some styles

  • Add two div tags in the template to display the title of the questionnaire results and the specific contents of the questionnaire results respectively
  • The second div tag needs to output the questionnaire results circularly with the help of the v-for instruction
  • The useRoute method of importing route in script is used to obtain the current route information. (note that useRoute is used instead of useRouter. The former obtains the current route and the latter obtains the entire route object)
  • In the setup method, the useRoute method is called to get the current route and to store it in the route variable.
  • Get the parameters passed from the questionnaire page in the current route through route.query, that is, the questionnaire results (it needs to be converted into the form of objects with the help of JOSN.parse)
  • Expose the questionnaire results to the template through return
  • Finally, simply set the page style
<template>
	<div style="text-align:center;">
		<h1>Questionnaire results</h1>
	</div>
	<div class="item" v-for="item in result" :key="item">{{item}}</div>
</template>
import {useRoute} from 'vue-router'
export default {
	setup(){
		const route = useRoute();
		const result = JSON.parse(route.query.result);
		return {
			result
		}
	}
}
.item{
	width:100%;
	padding: 5px;
	box-sizing: border-box;
	border: 1px solid lightblue;
	border-radius: 5px;
	margin-top:10px;
}

Effect display

summary

At this point, a questionnaire survey with route jump and result display function are completed. The main function point of this sharing is Vue router routing. In this paper, I introduced Vue router and made a simple configuration. Click the submit button to jump to the questionnaire result page. At the same time, the filled results are passed to the result page as parameters and displayed.
That's all for this sharing. Your favorite friends are welcome to comment and pay attention!

Tags: Javascript Front-end Vue

Posted on Wed, 24 Nov 2021 20:19:24 -0500 by subcool