【千字长文，熬夜更新，原创不易，多多支持，感谢大家】
前言
hello，小伙伴们大家好。在上一篇文章中我们已经实现了问卷调查的提交功能，在填写完问卷点击提交后会把问卷结果显示在控制台中。然而这种形式对用户来说显然很不友好，甚至有的用户并不知道如何打开控制台，给人的感觉就是点了提交按钮没有任何反应，看不到提交结果也不知道有没有提交成功。在本次分享中我们将沿着上篇文章继续向下深入，借助vue-router路由来实现点击提交按钮后携带者问卷结果跳转到一个新的“问卷结果”页面，并将结果展示给用户。
安装及配置路由
因为本次分享中会涉及到页面的跳转，因此我们将引入vue-router，借助路由来控制实现页面跳转。
- 首先需要安装最新版本的vue-router（npm install vue-router@4），如果在创建项目时勾选了router说明已经安装，这步可省略
- 在项目的src目录下新建router目录用于存放路由相关文件
- 在上面新建的router目录中新建一个index.js文件
- 打开index.js，在顶部导入vue-router中的两个方法createRouter和createWebHashHistory分别用于创建路由对象和创建一个哈希模式的路由
- 把需要通过路由来控制的组件导入，如问卷页组件（Home.vue）和结果页组件（result.vue）
- 配置不同组件对应的路由信息
- 调用createRouter方法创建路由对象并默认导出
- 最后还需要在main.js中导入上面创建的路由对象并应用到vue实例中
- router/index.js源码展示
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(),//采用hash模式的路由
routes
})
export default router;
- main.js 修改
//添加代码
import router from './router'
//修改代码
createApp(App).use(router).mount('#app')
修改App.vue组件
因为我们将要通过路由来控制页面的展示和跳转，因此需要对App.vue组件进行改造：
- 将App.vue中原有的Home组件删除
- 在模板中添加两个新的路由标签：
- router-link：用于控制路由跳转的超链接标签
- router-view：用于展示路由对应的页面内容
修改后源码如下：
<template>
<router-link to="/">问卷</router-link>
<router-view />
</template>
export default {
setup(){
}
}
修改Home.vue组件
Home.vue组件改动也不是很多，主要有两步操作：在模板中添加一个标题“问卷调查”，在提交按钮中实现路由跳转并携带结果作为参数
- 修改组件的模板，在页面顶部添加一个h1标签用于展示标题：“问卷调查”
- 在JavaScript代码中导入路由的useRouter方法。（由于在vue3.0中无法通过this来访问vue的实例，因此也无法通过this.$ router 和 this.$ route来获取路由信息，但相应的vue-router为我们提供了两个对应的方法useRouter和useRoute来代替它们）
- 在setup方法中调用useRouter方法来获取router对象
- 在提交按钮的submit方法中通过router对象的push方法来实现路由的跳转，并将问卷结果作为参数传递给问卷结果页。（注意：在前面的文章中我们将问卷结果保存到了一个对象中，由于对象不能直接作为参数传递，所以这里我们需要借助JSON.stringify方法先将结果转换成json字符串的形式，然后再传递）
<template>
<!--...省略-->
<div class="main">
<div style="text-align:center">
<h1>问卷调查</h1>
</div>
<!--...省略-->
</div>
</template>
//...省略
import {
useRouter} from 'vue-router'
setup(){
//...省略
const router = useRouter();
const submit = ()=>{
router.push({
name:'Result', //路由中配置的路由名称
query:{
result:JSON.stringify(result)
}
})
}
//...省略
}
新建问卷结果页result.vue
添加一个新的result.vue页面用于展示问卷结果，该页面相对来说也是比较简单的，只需要把问卷结果从路由参数中获取到然后展示在页面上即可，为了让页面不至于太丑，我们需要简单的添加一些样式
- 在模板中添加两个div标签分别用于展示问卷结果标题和问卷结果的具体内容
- 第二个div标签需要借助v-for指令将问卷结果循环输出
- 在script中导入路由的useRoute方法，用于获取当前路由信息。（注意是useRoute而不是useRouter，前者是获取当前路由，而后者是获取整个路由对象）
- 在setup方法中调用useRoute方法获取当前路由并报存到route变量中
- 通过route.query在当前路由中拿到问卷调查页面传过来的参数，也就是问卷结果（需要借助JOSN.parse转换成对象的形式）
- 通过return将问卷结果暴露给模板
- 最后再简单的设置一下页面样式就ok啦
<template>
<div style="text-align:center;">
<h1>问卷结果</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;
}
效果展示
总结
到此，一个带有路由跳转的问卷调查及结果展示功能就完成了。本次分享主要功能点就是vue-router路由，本文中我引入了vue-router并进行了简单配置，实现了点击提交按钮跳转到问卷结果页，同时将填写结果作为参数传递给结果页面并进行展示。
本次分享就到这里，喜欢的小伙伴欢迎点赞评论加关注哦！