使用浏览器后退/前进按钮的 Vue.js 调查答案

【问题标题】：Vue.js survey using browser back/forward buttons使用浏览器后退/前进按钮的 Vue.js 调查
【发布时间】：2018-08-19 13:59:53
【问题描述】：

我正在使用 Vue.js 创建一个包含多个页面的调查。一切正常，除了我需要使浏览器后退/前进按钮与页面上的上一个/下一个按钮相同。

我用谷歌搜索了很多次，但我暂时想不出任何解决方案......

我知道我可以使用vue-router，但我不知道如何适应它。

我怎样才能做到这一点？

HTML

<!DOCTYPE html>
***head***

<body>
    <div id="app">
        <h1>{{ survey.title }}</h1>

        <div id="survey" v-for="(question, index) in survey.questions">

            <div v-show="index === questionIndex">
                <h3>{{ question.text }}</h3>
                <div v-if="questionIndex === 2">
                    <input type="text" v-model="userResponses[2]" placeholder="Please enter your location:"> 
                </div>
                <div v-else-if="questionIndex === 4">
                    <select v-model="question4" multiple>
                        <option v-for="response in question.responses"> {{ response.text }} </option></select>
                </div>
                <div v-else-if="questionIndex === 5">
                    <select v-model="question5" multiple>
                        <option v-for="response in question.responses"> {{ response.text }} </option></select>
                </div>
                <div v-else>
                    <ol>
                        <li v-for="response in question.responses">
                            <label>
                                <input type="radio" v-bind:value="response" 
                                                    v-bind:name="index" 
                                                    v-model="userResponses[index]"> {{ response.text }}
                            </label>
                        </li>
                    </ol>
                </div>
                <div id="container">
                    <button id="left" v-if="questionIndex > 0" v-on:click="prev">Previous</button>
                    <button id="right" v-on:click="next">Next</button>
                </div>
            </div>
        </div>
        <div v-show="questionIndex === survey.questions.length">
            <h2>Thank you for taking our survey!</h2>
            <p>{{ userResponses }}</p>
            <p>{{ question4 }}</p>
            <p>{{ question5 }}</p>
        </div>
    </div>

    <footer>&copy; 2018 George Salukvadze for ***</footer>
</body>
</html>

Vue.js

window.onload = survey;
function survey(){
 var survey = {
    title: 'Welcome to online survey for Liquid!',
    questions: [
        {
            text: "What is your age group?",
            responses: [
                {text: '15-24'}, 
                {text: '25-34'},
                {text: '35-44'},
            ]
        }, {
            text: "What is your gender?",
            responses: [
                {text: 'Male'}, 
                {text: 'Female'},
                {text: 'Do not identify'},
            ]
        }, {
            text: "Where do you live?",
            responses: [
                {text: 'Please enter your location'},
            ]
        }, {
            text: "Do you like to shop?",
            responses: [
                {text: 'Yes'},
                {text: 'No'},
            ]
        }, {
            text: "Select your favorite things to buy:",
            responses: [
                {text: 'Clothing'},
                {text: 'Lingerie'},
                {text: 'Shoes'},
                {text: 'Devices'},
                {text: 'Cars'},
            ]
        }, {
            text: "Please select your favorite brands:",
            responses: [
                {text: 'Sandro'},
                {text: 'Maje'},
                {text: 'Sony'},
                {text: 'Ferrari'},
                {text: 'BMW'},
                {text: 'Asus'},
            ]
        }
    ]
 };

 new Vue({
     el: '#app',
     data: { 
         survey: survey,
         questionIndex: 0,
         userResponses: Array(survey.questions.length),
         question4: Array(5),
         question5: Array(9),
     }, 
     methods: {
         next: function() {
             this.questionIndex++;
         },
         prev: function() {
             this.questionIndex--;
         }
     }
 });
}

【问题讨论】：

这不是你的答案，但我认为这可能是一个问题：在函数内定义调查不会让它具有全局范围，对吗？我认为您需要将 new Vue({...}) 代码放在 onload 处理程序中。
@RobertMoore，感谢您的评论。页面本身工作得很好，唯一的问题是浏览器的后退按钮不会返回到上一个问题（例如），而是返回到浏览器之前打开的页面。所以你认为你的想法可以解决这个问题？我会试一试，然后回复你

标签： javascript vue.js vuejs2 browser-history html5-history

【解决方案1】：

您可以按照您的暗示使用vue-router。但是，对于您的示例，最简单的解决方案是仅使用浏览器的历史 API。步骤：

当转到上一个/下一个问题时，使用history.pushState向浏览器的历史记录添加一个状态：

 methods: {
     next: function() {
         this.questionIndex++;
         this.updateHistory();  // added this line
     },
     prev: function() {
         this.questionIndex--;
         this.updateHistory();  // added this line
     },
     updateHistory: function() {  // added this method
         history.pushState({questionIndex: this.questionIndex}, "Question " + this.questionIndex);
     }
 }

现在您所要做的就是聆听那些历史状态的变化。 mounted：

 mounted: function() {
     var vm = this;
     window.addEventListener('popstate', function(event) {
         vm.questionIndex = (event.state || {questionIndex: 0}).questionIndex;
     });
 },

就是这样。

点击这里查看a demo page at JSBin (check the history button)。

您会找到source for that demo here。

【讨论】：

只要我们在这里，我也想实现一个cookie，以便在浏览器关闭时保存调查的状态。你能帮帮我吗？
您应该打开一个新问题，以便其他人也可以帮助您。您可能需要一个插件来处理 cookie。