Vue.js 使用浏览器 back/forward 按钮进行调查

Question

我正在使用 Vue.js 创建一个包含多个页面的调查。一切正常，除了我需要使浏览器 back/forward 按钮与页面上的 Previous/Next 按钮一样。

我谷歌了很多次，但我暂时想不出任何解决办法...

我知道我可以使用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--;
         }
     }
 });
}

Answer 1

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

移动到 previous/next 个问题时，使用 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。

Vue.js 使用浏览器 back/forward 按钮进行调查

Vue.js survey using browser back/forward buttons

javascript

vue.js

vuejs2

browser-history

html5-history