使用瀏覽器后退/前進按鈕進行Vue.js調查

Question

我正在使用Vue.js創建具有多個頁面的調查。 一切正常，除了我需要使瀏覽器后退/前進按鈕與頁面上的上一個/下一個按鈕相同。

我已經在Google上搜索過多次，但目前無法提出任何解決方案...

我知道我可以使用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。 腳步：

移至上一個/下一個問題時，請使用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; }); },

就是這樣。

單擊此處以獲取JSBin上的演示頁面（單擊歷史記錄按鈕） 。

您可以在此處找到該演示的源。

使用瀏覽器后退/前進按鈕進行Vue.js調查

問題描述

1 個解決方案

解決方案1
3 已采納 2018-03-11 17:20:29

使用瀏覽器后退/前進按鈕進行Vue.js調查

問題描述

1 個解決方案

解決方案1 3 已采納 2018-03-11 17:20:29

解決方案1
3 已采納 2018-03-11 17:20:29