携手Vue3.0与Vue-router：体验问卷答题的流畅与结果揭晓的惊喜

2023-10-16 23:43:58

导语

在上一篇文章中，我们共同迈出了Vue3.0实战之旅的第一步，构建了一个简单的问卷调查页面。而今天，我们将继续前进，借助Vue-router路由这一利器，实现点击提交按钮后携带问卷结果跳转到一个新的“问卷结果”页面，让用户能够直观地看到他们的选择所带来的结果。

引入Vue-router

首先，我们需要将Vue-router引入我们的项目。在终端中执行以下命令：

npm install vue-router

安装完成后，在main.js文件中引入Vue-router并将其安装到Vue实例中：

import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    component: Home
  },
  {
    path: '/result',
    component: Result
  }
]

const router = new VueRouter({
  routes
})

new Vue({
  router
}).$mount('#app')

在上面的代码中，我们定义了两个路由：一个是根路由“/”，另一个是“/result”路由，它将用于显示问卷结果。

创建“问卷结果”组件

接下来，我们需要创建一个“问卷结果”组件，该组件将用于显示问卷结果。在src/components目录下创建一个名为Result.vue的文件，并在其中添加以下代码：

<template>
  <div>
    <h1>问卷结果</h1>
    <ul>
      <li v-for="question in questions">{{ question.text }}: {{ question.answer }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ['questions'],
  data() {
    return {
      // ...
    }
  }
}
</script>