{"id":16573,"date":"2024-01-27T05:53:22","date_gmt":"2024-01-27T02:23:22","guid":{"rendered":"https:\/\/rasanegar.com\/blog\/%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%87%d8%a7%db%8c-%d8%aa%da%a9-%d8%b5%d9%81%d8%ad%d9%87-%d8%a7%db%8c-%d8%a8%d8%a7-vue-js-%d9%88-flask-%d9%be%db%8c%d9%85%d8%a7%db%8c%d8%b4-%d8%b1%d9%88%d8%aa\/"},"modified":"2024-01-27T05:53:22","modified_gmt":"2024-01-27T02:23:22","slug":"%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%87%d8%a7%db%8c-%d8%aa%da%a9-%d8%b5%d9%81%d8%ad%d9%87-%d8%a7%db%8c-%d8%a8%d8%a7-vue-js-%d9%88-flask-%d9%be%db%8c%d9%85%d8%a7%db%8c%d8%b4-%d8%b1%d9%88%d8%aa","status":"publish","type":"post","link":"https:\/\/rasanegaar.com\/blog\/%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%87%d8%a7%db%8c-%d8%aa%da%a9-%d8%b5%d9%81%d8%ad%d9%87-%d8%a7%db%8c-%d8%a8%d8%a7-vue-js-%d9%88-flask-%d9%be%db%8c%d9%85%d8%a7%db%8c%d8%b4-%d8%b1%d9%88%d8%aa\/","title":{"rendered":"\u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u062a\u06a9 \u0635\u0641\u062d\u0647 \u0627\u06cc \u0628\u0627 Vue.js \u0648 Flask: \u067e\u06cc\u0645\u0627\u06cc\u0634 \u0631\u0648\u062a\u0631 Vue \u0628\u0647 \u067e\u0633\u062a \u062f\u0648\u0645 \u062e\u0648\u0634 \u0622\u0645\u062f\u06cc\u062f \u0631\u0648\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Vue.js \u0648 Flask \u0628\u0631\u0627\u06cc \u062a\u0648\u0633\u0639\u0647 \u0648\u0628 \u062a\u0645\u0627\u0645 \u067e\u0634\u062a\u0647.  \u0645\u0648\u0636\u0648\u0639 \u0627\u0635\u0644\u06cc \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f \u0631\u0648\u06cc Vue Router\u060c \u0627\u0645\u0627 \u0645\u0646 \u062f\u0633\u062a\u0648\u0631\u0627\u0644\u0639\u0645\u0644 v-model \u0648 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0631\u0648\u0634\u200c\u0647\u0627\u06cc Vue \u0648 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc \u0645\u062d\u0627\u0633\u0628\u0647\u200c\u0634\u062f\u0647 \u0631\u0627 \u0646\u06cc\u0632 \u067e\u0648\u0634\u0634 \u062e\u0648\u0627\u0647\u0645 \u062f\u0627\u062f.  \u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u06af\u0641\u062a\u0647 \u0634\u062f\u060c \u0686\u06cc\u0632\u06cc \u06a9\u0627\u0641\u0626\u06cc\u0646 \u062f\u0627\u0631 \u0628\u06af\u06cc\u0631\u06cc\u062f \u0648 \u0645\u0635\u0631\u0641 \u06a9\u0646\u06cc\u062f &#8230;"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\"><p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0633\u0631\u0641\u0635\u0644\u0647\u0627\u06cc \u0645\u0637\u0644\u0628<\/p>\n<\/div><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/rasanegaar.com\/blog\/%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%87%d8%a7%db%8c-%d8%aa%da%a9-%d8%b5%d9%81%d8%ad%d9%87-%d8%a7%db%8c-%d8%a8%d8%a7-vue-js-%d9%88-flask-%d9%be%db%8c%d9%85%d8%a7%db%8c%d8%b4-%d8%b1%d9%88%d8%aa\/#%d9%be%db%8c%d9%85%d8%a7%db%8c%d8%b4_%d8%b1%d9%88%d8%aa%d8%b1_vue\" >\u067e\u06cc\u0645\u0627\u06cc\u0634 \u0631\u0648\u062a\u0631 Vue<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/rasanegaar.com\/blog\/%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%87%d8%a7%db%8c-%d8%aa%da%a9-%d8%b5%d9%81%d8%ad%d9%87-%d8%a7%db%8c-%d8%a8%d8%a7-vue-js-%d9%88-flask-%d9%be%db%8c%d9%85%d8%a7%db%8c%d8%b4-%d8%b1%d9%88%d8%aa\/#%d9%85%d8%ad%d8%aa%d9%88%db%8c%d8%a7%d8%aa_%d8%b3%d8%b1%db%8c\" >\u0645\u062d\u062a\u0648\u06cc\u0627\u062a \u0633\u0631\u06cc<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/rasanegaar.com\/blog\/%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%87%d8%a7%db%8c-%d8%aa%da%a9-%d8%b5%d9%81%d8%ad%d9%87-%d8%a7%db%8c-%d8%a8%d8%a7-vue-js-%d9%88-flask-%d9%be%db%8c%d9%85%d8%a7%db%8c%d8%b4-%d8%b1%d9%88%d8%aa\/#%d8%a2%d8%b4%d9%86%d8%a7%db%8c%db%8c_%d8%a8%d8%a7_%d8%b1%d9%88%d8%aa%d8%b1_vue\" >\u0622\u0634\u0646\u0627\u06cc\u06cc \u0628\u0627 \u0631\u0648\u062a\u0631 Vue<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/rasanegaar.com\/blog\/%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%87%d8%a7%db%8c-%d8%aa%da%a9-%d8%b5%d9%81%d8%ad%d9%87-%d8%a7%db%8c-%d8%a8%d8%a7-vue-js-%d9%88-flask-%d9%be%db%8c%d9%85%d8%a7%db%8c%d8%b4-%d8%b1%d9%88%d8%aa\/#%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87_%d8%a7%d8%b2_vue-router_%d8%a8%d8%b1%d8%a7%db%8c_%d9%86%d9%85%d8%a7%db%8c%d8%b4_%db%8c%da%a9_%d9%86%d8%b8%d8%b1%d8%b3%d9%86%d8%ac%db%8c_%d9%81%d8%b1%d8%af%db%8c\" >\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 vue-router \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u06cc\u06a9 \u0646\u0638\u0631\u0633\u0646\u062c\u06cc \u0641\u0631\u062f\u06cc<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/rasanegaar.com\/blog\/%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%87%d8%a7%db%8c-%d8%aa%da%a9-%d8%b5%d9%81%d8%ad%d9%87-%d8%a7%db%8c-%d8%a8%d8%a7-vue-js-%d9%88-flask-%d9%be%db%8c%d9%85%d8%a7%db%8c%d8%b4-%d8%b1%d9%88%d8%aa\/#%d8%aa%da%a9%d9%85%db%8c%d9%84_%d8%aa%d8%ac%d8%b1%d8%a8%d9%87_%d9%86%d8%b8%d8%b1%d8%b3%d9%86%d8%ac%db%8c\" >\u062a\u06a9\u0645\u06cc\u0644 \u062a\u062c\u0631\u0628\u0647 \u0646\u0638\u0631\u0633\u0646\u062c\u06cc<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/rasanegaar.com\/blog\/%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%87%d8%a7%db%8c-%d8%aa%da%a9-%d8%b5%d9%81%d8%ad%d9%87-%d8%a7%db%8c-%d8%a8%d8%a7-vue-js-%d9%88-flask-%d9%be%db%8c%d9%85%d8%a7%db%8c%d8%b4-%d8%b1%d9%88%d8%aa\/#%d8%a7%d9%81%d8%b2%d9%88%d8%af%d9%86_%d9%be%db%8c%d9%88%d9%86%d8%af%d9%87%d8%a7%db%8c_%d8%b1%d9%88%d8%aa%d8%b1_%d8%a8%d9%87_%da%a9%d8%a7%d9%85%d9%be%d9%88%d9%86%d9%86%d8%aa_home\" >\u0627\u0641\u0632\u0648\u062f\u0646 \u067e\u06cc\u0648\u0646\u062f\u0647\u0627\u06cc \u0631\u0648\u062a\u0631 \u0628\u0647 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a Home<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/rasanegaar.com\/blog\/%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%87%d8%a7%db%8c-%d8%aa%da%a9-%d8%b5%d9%81%d8%ad%d9%87-%d8%a7%db%8c-%d8%a8%d8%a7-vue-js-%d9%88-flask-%d9%be%db%8c%d9%85%d8%a7%db%8c%d8%b4-%d8%b1%d9%88%d8%aa\/#%d9%85%d9%86%d8%a7%d8%a8%d8%b9\" >\u0645\u0646\u0627\u0628\u0639<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/rasanegaar.com\/blog\/%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%87%d8%a7%db%8c-%d8%aa%da%a9-%d8%b5%d9%81%d8%ad%d9%87-%d8%a7%db%8c-%d8%a8%d8%a7-vue-js-%d9%88-flask-%d9%be%db%8c%d9%85%d8%a7%db%8c%d8%b4-%d8%b1%d9%88%d8%aa\/#%d9%86%d8%aa%db%8c%d8%ac%d9%87\" >\u0646\u062a\u06cc\u062c\u0647<\/a><\/li><\/ul><\/nav><\/div>\n<span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">\u0632\u0645\u0627\u0646 \u0644\u0627\u0632\u0645 \u0628\u0631\u0627\u06cc \u0645\u0637\u0627\u0644\u0639\u0647: <\/span> <span class=\"rt-time\"> 13<\/span> <span class=\"rt-label rt-postfix\">\u062f\u0642\u06cc\u0642\u0647<\/span><\/span><p> <br \/>\n<\/p>\n<div class=\"content\"><noscript><\/p>\n<style>.lazyload-placeholder { display: none;  }<\/style>\n<p><\/noscript><\/p>\n<h2 id=\"navigatingthevuerouter\"><span class=\"ez-toc-section\" id=\"%d9%be%db%8c%d9%85%d8%a7%db%8c%d8%b4_%d8%b1%d9%88%d8%aa%d8%b1_vue\"><\/span>\u067e\u06cc\u0645\u0627\u06cc\u0634 \u0631\u0648\u062a\u0631 Vue<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u0647 \u067e\u0633\u062a \u062f\u0648\u0645 \u062e\u0648\u0634 \u0622\u0645\u062f\u06cc\u062f \u0631\u0648\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Vue.js \u0648 Flask \u0628\u0631\u0627\u06cc \u062a\u0648\u0633\u0639\u0647 \u0648\u0628 \u062a\u0645\u0627\u0645 \u067e\u0634\u062a\u0647.  \u0645\u0648\u0636\u0648\u0639 \u0627\u0635\u0644\u06cc \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f \u0631\u0648\u06cc Vue Router\u060c \u0627\u0645\u0627 \u0645\u0646 \u062f\u0633\u062a\u0648\u0631\u0627\u0644\u0639\u0645\u0644 v-model \u0648 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0631\u0648\u0634\u200c\u0647\u0627\u06cc Vue \u0648 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc \u0645\u062d\u0627\u0633\u0628\u0647\u200c\u0634\u062f\u0647 \u0631\u0627 \u0646\u06cc\u0632 \u067e\u0648\u0634\u0634 \u062e\u0648\u0627\u0647\u0645 \u062f\u0627\u062f.  \u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u06af\u0641\u062a\u0647 \u0634\u062f\u060c \u06cc\u06a9 \u0686\u06cc\u0632 \u06a9\u0627\u0641\u0626\u06cc\u0646 \u062f\u0627\u0631 \u0628\u06af\u06cc\u0631\u06cc\u062f \u0648 \u0645\u0642\u062f\u0627\u0631\u06cc Vue \u062e\u0648\u0628\u06cc \u0645\u0635\u0631\u0641 \u06a9\u0646\u06cc\u062f.  \u06a9\u062f \u0627\u06cc\u0646 \u067e\u0633\u062a \u0627\u0633\u062a \u0631\u0648\u06cc <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/amcquistan\/flask-vuejs-survey\/tree\/SecondPost\">GitHub \u0645\u0646<\/a>.<\/p>\n<h2 id=\"seriescontents\"><span class=\"ez-toc-section\" id=\"%d9%85%d8%ad%d8%aa%d9%88%db%8c%d8%a7%d8%aa_%d8%b3%d8%b1%db%8c\"><\/span>\u0645\u062d\u062a\u0648\u06cc\u0627\u062a \u0633\u0631\u06cc<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ol>\n<li>\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0648 \u0622\u0634\u0646\u0627\u06cc\u06cc \u0628\u0627 VueJS<\/li>\n<li>\u0645\u0633\u06cc\u0631\u06cc\u0627\u0628 Vue <em>(\u062a\u0648 \u0627\u06cc\u0646\u062c\u0627\u06cc\u06cc)<\/em><\/li>\n<li>\u0645\u062f\u06cc\u0631\u06cc\u062a \u062f\u0648\u0644\u062a\u06cc \u0628\u0627 Vuex<\/li>\n<li>RESTful API \u0628\u0627 Flask<\/li>\n<li>\u0627\u062f\u063a\u0627\u0645 AJAX \u0628\u0627 REST API<\/li>\n<li>\u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a JWT<\/li>\n<li>\u0627\u0633\u062a\u0642\u0631\u0627\u0631 \u062f\u0631 \u06cc\u06a9 \u0633\u0631\u0648\u0631 \u062e\u0635\u0648\u0635\u06cc \u0645\u062c\u0627\u0632\u06cc<\/li>\n<\/ol>\n<h2 id=\"gettingfamiliarwithvuerouter\"><span class=\"ez-toc-section\" id=\"%d8%a2%d8%b4%d9%86%d8%a7%db%8c%db%8c_%d8%a8%d8%a7_%d8%b1%d9%88%d8%aa%d8%b1_vue\"><\/span>\u0622\u0634\u0646\u0627\u06cc\u06cc \u0628\u0627 \u0631\u0648\u062a\u0631 Vue<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0645\u0627\u0646\u0646\u062f \u0628\u0633\u06cc\u0627\u0631\u06cc \u0627\u0632 \u062c\u0646\u0628\u0647 \u0647\u0627\u06cc \u062f\u06cc\u06af\u0631 \u0686\u0627\u0631\u0686\u0648\u0628 Vue.js\u060c \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/router.vuejs.org\/\">\u0631\u0648\u062a\u0631 Vue<\/a> \u067e\u06cc\u0645\u0627\u06cc\u0634 \u062f\u0631 \u0635\u0641\u062d\u0627\u062a \u0645\u062e\u062a\u0644\u0641 \u0648 \u0627\u062c\u0632\u0627\u06cc \u0628\u0639\u062f\u06cc \u0628\u0633\u06cc\u0627\u0631 \u0622\u0633\u0627\u0646 \u0627\u0633\u062a.<\/p>\n<p><em>\u06a9\u0646\u0627\u0631 1 &#8211; \u0645\u0648\u0627\u0631\u062f Vue \u0648 vue-router \u0628\u0647 \u062a\u0646\u0647\u0627\u06cc\u06cc<\/em><\/p>\n<p>\u0628\u0631\u062e\u06cc \u0627\u0632 \u0645\u0648\u0636\u0648\u0639\u0627\u062a \u0627\u0631\u0627\u0626\u0647 \u0634\u062f\u0647 \u062f\u0631 \u0627\u06cc\u0646 \u067e\u0633\u062a \u0628\u0647 \u0628\u0647\u062a\u0631\u06cc\u0646 \u0648\u062c\u0647 \u0628\u0627 \u0646\u0645\u0648\u0646\u0647\u200c\u0647\u0627\u06cc \u0627\u0633\u0628\u0627\u0628\u200c\u0628\u0627\u0632\u06cc \u06a9\u0648\u0686\u06a9\u200c\u062a\u0631 \u062a\u0648\u0636\u06cc\u062d \u062f\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f\u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0645\u0648\u0627\u0642\u0639\u06cc \u067e\u06cc\u0634 \u0645\u06cc\u200c\u0622\u06cc\u062f \u06a9\u0647 \u0645\u0646 \u0628\u0631\u0627\u06cc \u0627\u0646\u062c\u0627\u0645 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u062f\u0633\u062a \u0628\u0647 \u06a9\u0627\u0631 \u0634\u0648\u0645.  \u062f\u0631 \u0627\u06cc\u0646 \u06a9\u0646\u0627\u0631\u060c \u0622\u0646\u0686\u0647 \u0631\u0627 \u06a9\u0647 \u0628\u0631\u0627\u06cc \u0631\u0647\u0627 \u06a9\u0631\u062f\u0646 \u062f\u0631 \u06cc\u06a9 \u0646\u0645\u0648\u0646\u0647 Vue \u0648 \u0631\u0648\u062a\u0631 \u0645\u0633\u062a\u0642\u0644 \u0644\u0627\u0632\u0645 \u0627\u0633\u062a \u0646\u0634\u0627\u0646 \u062e\u0648\u0627\u0647\u0645 \u062f\u0627\u062f.  \u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 Vue \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc SPA \u06a9\u0627\u0645\u0644 \u0641\u0648\u0642 \u0627\u0644\u0639\u0627\u062f\u0647 \u0627\u0633\u062a\u060c \u062a\u0648\u0627\u0646\u0627\u06cc\u06cc \u062d\u0630\u0641 \u0622\u0646 \u062f\u0631 \u06cc\u06a9 HTML \u0645\u0639\u0645\u0648\u0644\u06cc \u0646\u06cc\u0632 \u0627\u0631\u0632\u0634 \u0648\u0627\u0642\u0639\u06cc \u062f\u0627\u0631\u062f. page.<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-comment\">&lt;!-- index.html --&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/unpkg.com\/vue\/dist\/vue.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"app\"<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h3<\/span>&gt;<\/span>Cartoon characters<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h3<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">v-for<\/span>=<span class=\"hljs-string\">\"(character, i) in characters\"<\/span> <span class=\"hljs-attr\">v-bind:key<\/span>=<span class=\"hljs-string\">\"i\"<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h4<\/span>&gt;<\/span>{{ character.name }}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h4<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span> <span class=\"hljs-attr\">v-bind:src<\/span>=<span class=\"hljs-string\">\"character.imgSrc\"<\/span> <span class=\"hljs-attr\">v-bind:alt<\/span>=<span class=\"hljs-string\">\"character.name\"<\/span>\/&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n<span class=\"hljs-keyword\">new<\/span> Vue({\n  <span class=\"hljs-attr\">el<\/span>: <span class=\"hljs-string\">'#app'<\/span>,\n  <span class=\"hljs-attr\">data<\/span>: {\n    <span class=\"hljs-attr\">characters<\/span>: ({\n      <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">'Scooby'<\/span>,\n      <span class=\"hljs-attr\">imgSrc<\/span>: <span class=\"hljs-string\">'https:\/\/www.wbkidsgo.com\/Portals\/4\/Images\/Content\/Characters\/Scooby\/characterArt-scooby-SD.png'<\/span>\n    }, {\n      <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">'Shaggy'<\/span>,\n      <span class=\"hljs-attr\">imgSrc<\/span>: <span class=\"hljs-string\">'https:\/\/upload.wikimedia.org\/wikipedia\/en\/thumb\/8\/87\/ShaggyRogers.png\/150px-ShaggyRogers.png'<\/span>\n    } )\n  }\n})\n\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<\/code><\/pre>\n<p>\u0627\u06cc\u0646 \u06a9\u0627\u0631\u0627\u06a9\u062a\u0631\u0647\u0627\u06cc \u06a9\u0627\u0631\u062a\u0648\u0646\u06cc Scooby \u0648 Shaggy \u0631\u0627 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f.  \u0645\u062b\u0627\u0644 \u0628\u0647 \u0645\u0639\u0631\u0641\u06cc <code>v-bind:<\/code> \u062f\u0633\u062a\u0648\u0631\u0627\u0644\u0639\u0645\u0644\u06cc \u0628\u0631\u0627\u06cc \u0627\u062a\u0635\u0627\u0644 \u067e\u0648\u06cc\u0627 \u062f\u0627\u062f\u0647 \u0647\u0627 \u0627\u0632 <code>characters<\/code> \u0622\u0631\u0627\u06cc\u0647 \u0628\u0647 <code>src<\/code> \u0648 <code>alt<\/code> \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc <code>img<\/code> \u0639\u0646\u0635\u0631\u06cc \u06a9\u0647 \u062f\u0627\u062f\u0647 \u0647\u0627 \u0631\u0627 \u0642\u0627\u062f\u0631 \u0645\u06cc \u0633\u0627\u0632\u062f \u0645\u062d\u062a\u0648\u0627 \u0631\u0627 \u0647\u062f\u0627\u06cc\u062a \u06a9\u0646\u0646\u062f.  \u0627\u06cc\u0646 \u0634\u0628\u06cc\u0647 \u0628\u0647 \u0631\u0648\u0634 \u062f\u0631\u0648\u0646\u06cc\u0627\u0628\u06cc \u0645\u062a\u0646 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0622\u0646 \u0627\u0633\u062a <code>{{}}<\/code>\u060c \u0628\u062c\u0632 <code>v-bind<\/code> \u062f\u0627\u062f\u0647 \u0647\u0627 \u0631\u0627 \u0628\u0647 \u0635\u0641\u0627\u062a \u062f\u0631\u0648\u0646 \u06cc\u0627\u0628\u06cc \u0645\u06cc \u06a9\u0646\u062f.  \u0634\u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u06cc\u06a9 \u0646\u0645\u0648\u0646\u0647 \u06a9\u0627\u0631 \u0627\u0632 \u0627\u06cc\u0646 \u0631\u0627 \u067e\u06cc\u062f\u0627 \u06a9\u0646\u06cc\u062f <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/jsfiddle.net\/amcquistan\/zwjftnw6\/\">\u0627\u06cc\u0646\u062c\u0627<\/a>.<\/p>\n<p><img decoding=\"async\" class=\"img-responsive\" src=\"https:\/\/rasanegar.com\/blog\/wp-content\/uploads\/2024\/01\/single-page-apps-vue-and-flask-navigating-vue-router-1.png\" alt=\"\u0627\u0633\u06a9\u0648\u0628\u06cc \u0648 \u0634\u06af\u06cc\" title=\"\"><\/p>\n<p>\u0628\u0647 \u062c\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u0647\u0631 \u062f\u0648 \u06a9\u0627\u0631\u0627\u06a9\u062a\u0631\u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0631\u0648\u06cc\u06a9\u0631\u062f \u062e\u0648\u062f \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u0645\u060c \u0648 \u0628\u0647 \u0645\u0627 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc\u200c\u062f\u0647\u062f \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u06cc\u06a9 \u0645\u0624\u0644\u0641\u0647 \u062e\u0627\u0635 \u00abScooby\u00bb \u06cc\u0627 \u00abShaggy\u00bb \u0628\u0631\u0627\u06cc \u0647\u0631 \u0634\u062e\u0635\u06cc\u062a\u060c \u0631\u0648\u06cc \u067e\u06cc\u0648\u0646\u062f\u06cc \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u0645.  \u0628\u0631\u0627\u06cc \u0627\u0646\u062c\u0627\u0645 \u0627\u06cc\u0646 \u06a9\u0627\u0631\u060c \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 vue-router \u0631\u0627 \u0645\u06cc \u06a9\u0634\u0645 \u0648 \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u0632\u06cc\u0631 \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u0645:<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-comment\">&lt;!-- index.html --&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/unpkg.com\/vue\/dist\/vue.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/unpkg.com\/vue-router\/dist\/vue-router.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"app\"<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">router-link<\/span> <span class=\"hljs-attr\">to<\/span>=<span class=\"hljs-string\">\"\/scooby\"<\/span>&gt;<\/span>Scooby<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">router-link<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">router-link<\/span> <span class=\"hljs-attr\">to<\/span>=<span class=\"hljs-string\">\"\/shaggy\"<\/span>&gt;<\/span>Shaggy<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">router-link<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">router-view<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">router-view<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"handlebars\"><span class=\"xml\">\nconst Scooby = {\n  template: `\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h4<\/span>&gt;<\/span>Scooby<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h4<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/www.wbkidsgo.com\/Portals\/4\/Images\/Content\/Characters\/Scooby\/characterArt-scooby-SD.png\"<\/span> <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"scooby\"<\/span>\/&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>`\n}\n\nconst Shaggy = {\n  template: `\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"character\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h4<\/span>&gt;<\/span>Shaggy<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h4<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/upload.wikimedia.org\/wikipedia\/en\/thumb\/8\/87\/ShaggyRogers.png\/150px-ShaggyRogers.png\"<\/span> <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"shaggy\"<\/span>\/&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>`\n}\n\nconst router = new vue-router({\n  routes: (\n    { path: '\/scooby', component: Scooby },\n    { path: '\/shaggy', component: Shaggy }\n  )\n})\n\nconst app = new Vue({ router: router }).$mount('#app')\n<\/span><\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<\/code><\/pre>\n<p>\u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u0627\u062d\u062a\u0645\u0627\u0644\u0627\u064b \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u06af\u0648\u06cc\u06cc\u062f\u060c \u0627\u06cc\u0646 \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u062a\u0648\u0633\u0637 \u0645\u0624\u0644\u0641\u0647\u200c\u0647\u0627\u06cc \u06a9\u062f\u06af\u0630\u0627\u0631\u06cc \u0634\u062f\u0647 \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc\u200c\u0634\u0648\u062f\u060c \u06a9\u0647 \u0627\u0632 \u062f\u06cc\u062f\u06af\u0627\u0647 \u0642\u0627\u0628\u0644\u06cc\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u062c\u062f\u062f\u060c \u062a\u063a\u06cc\u06cc\u0631 \u0633\u0648\u062f\u0645\u0646\u062f\u06cc \u0646\u06cc\u0633\u062a.  \u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644\u060c \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0622\u0633\u0627\u0646 \u0627\u0632 vue-router \u0631\u0627 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f.  \u0639\u0644\u0627\u0648\u0647 \u0628\u0631 \u0645\u0646\u0628\u0639 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 vue-router\u060c HTML \u062d\u0627\u0648\u06cc \u062f\u0648 \u0639\u0646\u0635\u0631 \u062c\u062f\u06cc\u062f \u0627\u0633\u062a\u060c \u0627\u062c\u0632\u0627\u06cc \u062f\u0631 \u0648\u0627\u0642\u0639 \u0645\u062e\u0635\u0648\u0635 vue-router.<\/p>\n<p>\u0627\u0648\u0644\u06cc\u0646 \u062c\u0632\u0621 vue-router \u0627\u0633\u062a <code>&lt;router-link&gt;<\/code> \u06a9\u0647 \u06cc\u06a9 \u062c\u0632\u0621 \u0627\u0633\u062a \u06a9\u0647 \u06cc\u06a9 \u0645\u0633\u06cc\u0631 \u0645\u0633\u06cc\u0631 \u0631\u0627 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u06cc \u06a9\u0646\u062f <code>to<\/code> \u0648\u06cc\u0698\u06af\u06cc\u060c \u06a9\u0647 \u062f\u0631 \u0648\u0627\u0642\u0639 \u06cc\u06a9 &#8220;\u067e\u0627\u0631\u0627\u0645\u062a\u0631&#8221; \u062f\u0631 \u06cc\u06a9 \u062c\u0632\u0621 Vue \u0646\u0627\u0645\u06cc\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.  \u0631\u0627 <code>&lt;router-link&gt;<\/code> \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u06cc\u06a9 \u0639\u0646\u0635\u0631 \u067e\u06cc\u0648\u0646\u062f \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0628\u0647 \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627\u06cc \u06a9\u0644\u06cc\u06a9 \u067e\u0627\u0633\u062e \u0645\u06cc \u062f\u0647\u062f \u0648 \u0628\u0647 Vue \u0645\u06cc \u06af\u0648\u06cc\u062f \u06a9\u0647 \u0645\u0624\u0644\u0641\u0647 \u0645\u0631\u062a\u0628\u0637 \u0628\u0627 \u0622\u0646 \u0631\u0627 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0647\u062f <code>to<\/code> \u067e\u0627\u0631\u0627\u0645\u062a\u0631\u060c \u06cc\u0627 &#8220;\/scooby&#8221; \u06cc\u0627 &#8220;\/shaggy&#8221;.<\/p>\n<p>\u062f\u0631 \u0632\u06cc\u0631 <code>&lt;router-link&gt;<\/code> \u06cc\u06a9 \u062c\u0632\u0621 \u062c\u062f\u06cc\u062f \u062f\u06cc\u06af\u0631 \u0627\u0633\u062a\u060c <code>&lt;router-view&gt;<\/code>\u060c \u062c\u0627\u06cc\u06cc \u0627\u0633\u062a \u06a9\u0647 vue-router \u0628\u0647 Vue \u0645\u06cc \u06af\u0648\u06cc\u062f \u06a9\u0647 \u0627\u062c\u0632\u0627\u06cc UI\u060c Scooby \u0648 Shaggy \u0631\u0627 \u062a\u0632\u0631\u06cc\u0642 \u06a9\u0646\u062f.  \u0627\u062c\u0632\u0627\u06cc \u0642\u0627\u0644\u0628 \u0633\u0641\u0627\u0631\u0634\u06cc Scooby \u0648 Shaggy \u062f\u0631 \u0642\u0633\u0645\u062a \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u0627\u0646\u062f <code>script<\/code> \u0639\u0646\u0635\u0631 \u062f\u0631 \u067e\u0627\u06cc\u06cc\u0646 \u0627\u06cc\u0646 \u0645\u062b\u0627\u0644 index.html page.<\/p>\n<p>\u0633\u067e\u0633 \u06cc\u06a9 \u0634\u06cc\u0621 vue-router \u0628\u0627 a \u0646\u0645\u0648\u0646\u0647 \u0633\u0627\u0632\u06cc \u0645\u06cc \u0634\u0648\u062f <code>routes<\/code> \u0634\u06cc \u06a9\u0647 \u06cc\u06a9 \u0622\u0631\u0627\u06cc\u0647 \u0645\u0633\u06cc\u0631\u0647\u0627 \u0631\u0627 \u0645\u0634\u0627\u0628\u0647 \u0622\u0646\u0686\u0647 \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 Survey \u0645\u0642\u0627\u0644\u0647 \u0627\u0648\u0644 \u062f\u06cc\u062f\u06cc\u0645\u060c \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc \u06a9\u0646\u062f.  \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0645\u0633\u06cc\u0631\u0647\u0627\u06cc \u0645\u0633\u06cc\u0631 \u0628\u0647 \u0627\u062c\u0632\u0627\u06cc Scooby \u0648 Shaggy \u062a\u0631\u0633\u06cc\u0645 \u0645\u06cc \u0634\u0648\u0646\u062f.  \u0622\u062e\u0631\u06cc\u0646 \u06a9\u0627\u0631\u06cc \u06a9\u0647 \u0628\u0627\u06cc\u062f \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u062f \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u06cc\u06a9 \u0646\u0645\u0648\u0646\u0647 Vue \u0631\u0627 \u0646\u0645\u0648\u0646\u0647 \u0628\u0631\u062f\u0627\u0631\u06cc \u06a9\u0646\u06cc\u062f\u060c \u06cc\u06a9 \u0634\u06cc \u0631\u0648\u062a\u0631 \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u06cc\u06a9 \u0648\u06cc\u0698\u06af\u06cc \u0628\u0647 \u0634\u06cc \u06af\u0632\u06cc\u0646\u0647 \u0622\u0646 \u0628\u062f\u0647\u06cc\u062f \u0648 \u0646\u0645\u0648\u0646\u0647 \u0631\u0627 \u0628\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u0645\u062a\u0635\u0644 \u06a9\u0646\u06cc\u062f. <code>div<\/code>.<\/p>\n<p>\u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f \u0631\u0648\u06cc \u06cc\u0627 \u067e\u06cc\u0648\u0646\u062f \u0631\u0648\u062a\u0631 Scooby \u06cc\u0627 Shaggy \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u0622\u0646\u0647\u0627\u060c \u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u062f\u0631 \u0632\u06cc\u0631 \u0646\u0634\u0627\u0646 \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a.  \u06a9\u062f \u0627\u06cc\u0646 \u0645\u062b\u0627\u0644 \u0631\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646 \u06cc\u0627\u0641\u062a <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/jsfiddle.net\/amcquistan\/fek1fewa\/1\/\">\u0627\u06cc\u0646\u062c\u0627<\/a>.<\/p>\n<p><img decoding=\"async\" class=\"img-responsive\" src=\"https:\/\/rasanegar.com\/blog\/wp-content\/uploads\/2024\/01\/single-page-apps-vue-and-flask-navigating-vue-router-2.png\" alt=\"\u0644\u06cc\u0646\u06a9 \u0627\u0633\u06a9\u0648\u0628\u06cc\" title=\"\"><br \/>\n<img decoding=\"async\" class=\"img-responsive\" src=\"https:\/\/rasanegar.com\/blog\/wp-content\/uploads\/2024\/01\/single-page-apps-vue-and-flask-navigating-vue-router-3.png\" alt=\"\u0644\u06cc\u0646\u06a9 \u067e\u0634\u0645\u0627\u0644\u0648\" title=\"\"><\/p>\n<h2 id=\"usingvueroutertoshowanindividualsurvey\"><span class=\"ez-toc-section\" id=\"%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87_%d8%a7%d8%b2_vue-router_%d8%a8%d8%b1%d8%a7%db%8c_%d9%86%d9%85%d8%a7%db%8c%d8%b4_%db%8c%da%a9_%d9%86%d8%b8%d8%b1%d8%b3%d9%86%d8%ac%db%8c_%d9%81%d8%b1%d8%af%db%8c\"><\/span>\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 vue-router \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u06cc\u06a9 \u0646\u0638\u0631\u0633\u0646\u062c\u06cc \u0641\u0631\u062f\u06cc<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 Survey \u0628\u0631\u06af\u0631\u062f\u06cc\u0645\u060c \u0627\u062c\u0627\u0632\u0647 \u062f\u0647\u06cc\u062f \u0628\u062d\u062b \u062e\u0648\u062f \u0631\u0627 \u0628\u0627 \u0646\u06af\u0627\u0647\u06cc \u0628\u0647 \u0641\u0627\u06cc\u0644 routes\/index.js \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u0645.<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-keyword\">import<\/span> Vue <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'vue'<\/span>\n<span class=\"hljs-keyword\">import<\/span> Router <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'vue-router'<\/span>\n<span class=\"hljs-keyword\">import<\/span> Home <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'@\/components\/Home'<\/span>\n\nVue.use(Router)\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-keyword\">new<\/span> Router({\n  <span class=\"hljs-attr\">routes<\/span>: (\n    {\n      <span class=\"hljs-attr\">path<\/span>: <span class=\"hljs-string\">'\/'<\/span>,\n      <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">'Home'<\/span>,\n      <span class=\"hljs-attr\">component<\/span>: Home\n    }\n  )\n})\n<\/code><\/pre>\n<p>\u062e\u0627\u0646\u0647 page \u0646\u0638\u0631\u0633\u0646\u062c\u06cc \u0647\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u0627 \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 root URL \u062f\u0631 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0634\u062f\u0647 \u0627\u0633\u062a localhost:8080 \u0632\u06cc\u0631\u0627 \u0628\u0647 \u0646\u06af\u0627\u0634\u062a \u0634\u062f\u0647 \u0627\u0633\u062a <code>Home<\/code> \u062c\u0632\u0621 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u0645\u0633\u06cc\u0631\u0647\u0627\u06cc \u0631\u0648\u062a\u0631.<\/p>\n<p>\u0645\u0646 \u0647\u0645 \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u0645 hook \u0628\u0647 Vue \u0627\u0632 \u0637\u0631\u06cc\u0642 <code>Vue.use(Router)<\/code> \u0639\u0645\u0644\u06a9\u0631\u062f \u0628\u0631\u0627\u06cc \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 SPA \u0645\u062f\u0648\u0644\u0627\u0631 \u0645\u0627\u0646\u0646\u062f \u0627\u06cc\u0646.  \u0639\u0644\u0627\u0648\u0647 \u0628\u0631 \u0627\u06cc\u0646\u060c \u0645\u0646 \u0628\u0627\u06cc\u062f \u0631\u0648\u062a\u0631 \u0631\u0627 \u062f\u0631 \u0634\u06cc\u0621 \u06af\u0632\u06cc\u0646\u0647\u200c\u0647\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u0645 \u06a9\u0647 \u0628\u0647 \u0646\u0645\u0648\u0646\u0647 Vue \u062f\u0631 <code>main.js<\/code> \u0634\u0628\u06cc\u0647 \u0628\u0647 \u0646\u0645\u0648\u0646\u0647 \u0627\u0633\u0628\u0627\u0628 \u0628\u0627\u0632\u06cc Scooby\/Shaggy.<\/p>\n<p>\u0628\u0627 \u0627\u062f\u0627\u0645\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 Survey \u06cc\u06a9 \u0645\u0633\u06cc\u0631 \u062c\u062f\u06cc\u062f \u0628\u0647 \u0622\u0646 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u06a9\u0646\u0645 <code>routes<\/code> \u0634\u06cc \u06a9\u0647 \u0647\u0631 \u0646\u0638\u0631\u0633\u0646\u062c\u06cc \u0648 \u0633\u0648\u0627\u0644\u0627\u062a \u0622\u0646 \u0631\u0627 \u0628\u0647 \u06cc\u06a9 \u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u062c\u062f\u062f \u062a\u0631\u0633\u06cc\u0645 \u0645\u06cc \u06a9\u0646\u062f <code>Survey.vue<\/code> \u062c\u0632\u0621 \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 \u0641\u0627\u06cc\u0644  \u062f\u0631 \u0641\u0627\u06cc\u0644 routes\/index.js import \u0622 <code>Survey<\/code> \u062c\u0632\u0621 \u0648 \u0633\u067e\u0633 \u06cc\u06a9 \u0645\u0633\u06cc\u0631 \u0628\u0631\u0627\u06cc \u062a\u0631\u0633\u06cc\u0645 \u0647\u0631 \u0646\u0638\u0631\u0633\u0646\u062c\u06cc \u0628\u0627 \u0634\u0646\u0627\u0633\u0647 \u0622\u0646 \u0628\u0647 \u0622\u0646 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f <code>Survey<\/code> \u062c\u0632\u0621.<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-comment\">\/\/ ... omitted for brevity<\/span>\n<span class=\"hljs-keyword\">import<\/span> Survey <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'@\/components\/Survey'<\/span>\n\n<span class=\"hljs-comment\">\/\/ ... omitted for brevity<\/span>\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-keyword\">new<\/span> Router({\n  <span class=\"hljs-attr\">routes<\/span>: (\n    {\n      <span class=\"hljs-comment\">\/\/ ... omitted for brevity<\/span>\n    }, {\n      <span class=\"hljs-attr\">path<\/span>: <span class=\"hljs-string\">'\/surveys\/:id'<\/span>,\n      <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">'Survey'<\/span>,\n      <span class=\"hljs-attr\">component<\/span>: Survey\n    }\n  )\n})\n<\/code><\/pre>\n<p>\u062a\u0648\u062c\u0647 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f \u06a9\u0647 <code>:id<\/code> \u0628\u062e\u0634\u06cc \u0627\u0632 \u0645\u0633\u06cc\u0631 \u062c\u062f\u06cc\u062f <code>\/surveys\/:id<\/code>.  \u0627\u06cc\u0646 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u06cc\u06a9 \u0628\u062e\u0634 \u067e\u0648\u06cc\u0627 \u0634\u0646\u0627\u062e\u062a\u0647 \u0645\u06cc \u0634\u0648\u062f \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0622\u0646 \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u06cc\u06a9 \u0645\u062a\u063a\u06cc\u0631 \u062f\u0631 \u0645\u0633\u06cc\u0631 \u0645\u0633\u06cc\u0631 \u062f\u0631 \u0646\u0638\u0631 \u0628\u06af\u06cc\u0631\u06cc\u062f.  \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0648\u0631\u062f \u0645\u0646 \u0645\u06cc \u06af\u0648\u06cc\u0645 \u06a9\u0647 <code>:id<\/code> \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u062f \u0634\u062f \u0628\u0631\u0627\u06cc \u0634\u0646\u0627\u0633\u0627\u06cc\u06cc \u06cc\u06a9 \u0646\u0638\u0631\u0633\u0646\u062c\u06cc \u062e\u0627\u0635 \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u062f\u0631 <code>Survey<\/code> \u062c\u0632\u0621 \u0628\u0639\u062f\u06cc \u0633\u0627\u062e\u062a\u0647 \u0645\u06cc \u0634\u0648\u062f<\/p>\n<p>\u062f\u0631 <code>src\/components\/<\/code> \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u0628\u0647 \u0646\u0627\u0645 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <code>Survey.vue<\/code>\u060c \u0633\u067e\u0633 \u0622\u0646 \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f \u0648 \u0628\u062e\u0634 \u0647\u0627\u06cc \u0642\u0627\u0644\u0628 \u0627\u0633\u062a\u0627\u0646\u062f\u0627\u0631\u062f\u060c \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0648 \u0627\u0633\u062a\u0627\u06cc\u0644 \u0631\u0627 \u0628\u0647 \u0647\u0645\u0631\u0627\u0647 \u06a9\u062f \u0632\u06cc\u0631 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h3<\/span>&gt;<\/span>I'm a Survey Component<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h3<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> {\n  <span class=\"hljs-function\"><span class=\"hljs-title\">data<\/span>(<span class=\"hljs-params\"><\/span>)<\/span> {\n    <span class=\"hljs-keyword\">return<\/span> {\n      <span class=\"hljs-attr\">survey<\/span>: {}\n    }\n  },\n  <span class=\"hljs-function\"><span class=\"hljs-title\">beforeMount<\/span>(<span class=\"hljs-params\"><\/span>)<\/span> {\n    <span class=\"hljs-built_in\">console<\/span>.log(<span class=\"hljs-string\">'Survey.beforeMount -&gt; :id === '<\/span>, <span class=\"hljs-built_in\">this<\/span>.$route.params.id)\n  }\n}\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">style<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">style<\/span>&gt;<\/span>\n<\/code><\/pre>\n<p>\u062a\u0645\u0627\u0645 \u0641\u0627\u06cc\u0644 \u0647\u0627 \u0631\u0627 \u0630\u062e\u06cc\u0631\u0647 \u0645\u06cc \u06a9\u0646\u0645 \u0648 \u0633\u0631\u0648\u0631 \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647 \u0631\u0627 \u0628\u0627 \u0622\u0646 \u0634\u0631\u0648\u0639 \u0645\u06cc \u06a9\u0646\u0645 <code>npm run dev<\/code>\u060c \u0633\u067e\u0633 \u0622\u062f\u0631\u0633 \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f: <a rel=\"nofollow noopener\" target=\"_blank\" href=\"8080\/#\/surveys\/23\" class=\"broken_link\">localhost:8080\/#\/surveys\/23<\/a>.  \u062f\u0631 console \u0627\u0632 \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647 \u0645\u0631\u0648\u0631\u06af\u0631 \u0645\u0646 \u062a\u0635\u0648\u06cc\u0631 \u0632\u06cc\u0631 \u0631\u0627 \u0645\u06cc \u0628\u06cc\u0646\u0645.<\/p>\n<p><img decoding=\"async\" class=\"img-responsive\" src=\"https:\/\/rasanegar.com\/blog\/wp-content\/uploads\/2024\/01\/single-page-apps-vue-and-flask-navigating-vue-router-4.png\" alt=\"console\u0642\u0628\u0644 \u0627\u0632 Mount \u0648\u0627\u0631\u062f \u0634\u0648\u06cc\u062f\" title=\"\"><\/p>\n<p>\u067e\u0633 \u0686\u0647 \u0627\u062a\u0641\u0627\u0642\u06cc \u0627\u0641\u062a\u0627\u062f\u061f<\/p>\n<p>\u062f\u0631 <code>template<\/code> \u0628\u062e\u0634 \u0645\u0646 \u0645\u0642\u062f\u0627\u0631\u06cc \u06a9\u062f \u0645\u0632\u062e\u0631\u0641 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0645 \u062a\u0627 \u0645\u0634\u062e\u0635 \u0634\u0648\u062f \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a Survey \u062a\u0648\u0633\u0637 \u0631\u0648\u062a\u0631 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u0634\u0648\u062f.  \u062f\u0631 <code>script<\/code> \u0628\u062e\u0634 I \u06cc\u06a9 \u0634\u06cc \u0646\u0638\u0631\u0633\u0646\u062c\u06cc \u06a9\u0647 \u062f\u0631 \u0646\u0647\u0627\u06cc\u062a \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0646\u0638\u0631\u0633\u0646\u062c\u06cc \u0631\u0627 \u0646\u06af\u0647 \u0645\u06cc \u062f\u0627\u0631\u062f\u060c \u0645\u0642\u062f\u0627\u0631\u062f\u0647\u06cc \u0627\u0648\u0644\u06cc\u0647 \u06a9\u0631\u062f\u0645.  \u062f\u0631 <code>beforeMount<\/code> \u0686\u0631\u062e\u0647 \u0632\u0646\u062f\u06af\u06cc hook \u0627\u062a\u0641\u0627\u0642 \u062e\u06cc\u0644\u06cc \u062c\u0627\u0644\u0628\u06cc \u062f\u0631 \u062d\u0627\u0644 \u0631\u062e \u062f\u0627\u062f\u0646 \u0627\u0633\u062a  \u062f\u0631 \u0627\u06cc\u0646 \u062a\u0627\u0628\u0639 \u0628\u0647 \u0645\u0633\u06cc\u0631 \u067e\u0646\u062c\u0631\u0647 \u0641\u0639\u0644\u06cc \u0648 \u067e\u0633 \u0627\u0632 \u0622\u0646 \u062f\u0633\u062a\u0631\u0633\u06cc \u062f\u0627\u0631\u0645 <code>:id<\/code> \u067e\u0627\u0631\u0627\u0645\u062a\u0631 \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u062f\u0631 <code>route<\/code> \u0645\u062f\u0648\u0644.<\/p>\n<p>\u0627\u06cc\u0646 \u0642\u0633\u0645\u062a \u0622\u062e\u0631 \u0627\u0645\u06a9\u0627\u0646 \u067e\u0630\u06cc\u0631 \u0627\u0633\u062a \u0632\u06cc\u0631\u0627 <code>Survey<\/code> \u0634\u06cc\u0621 Vue \u062c\u0632\u0621 \u0628\u0647 \u0646\u0645\u0648\u0646\u0647 vue-router \u0627\u0634\u0627\u0631\u0647 \u062f\u0627\u0631\u062f \u06a9\u0647 \u0628\u0647 \u0645\u0633\u06cc\u0631 \u062f\u0633\u062a\u0631\u0633\u06cc \u062f\u0627\u0631\u062f \u0648 \u0628\u0647 \u0645\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0628\u0627 \u0622\u0646 \u0628\u0647 \u0622\u0646 \u062f\u0633\u062a\u0631\u0633\u06cc \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u0645. <code>this.$route.params.id<\/code>.  \u06cc\u06a9 \u0645\u0633\u06cc\u0631 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u0686\u0646\u062f\u06cc\u0646 \u0628\u062e\u0634 \u067e\u0648\u06cc\u0627 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u062f \u0648 \u0647\u0645\u0647 \u062f\u0631 \u0627\u062c\u0632\u0627\u06cc \u0645\u0631\u0628\u0648\u0637\u0647 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u0622\u0646 \u0642\u0627\u0628\u0644 \u062f\u0633\u062a\u0631\u0633\u06cc \u0647\u0633\u062a\u0646\u062f <code>params<\/code> \u0639\u0636\u0648 <code>this.$route<\/code> \u0647\u062f\u0641 &#8211; \u0634\u06cc.<\/p>\n<p>\u0628\u0639\u062f \u0645\u0646 \u06cc\u06a9 \u062a\u0627\u0628\u0639 \u0633\u0627\u062e\u062a\u06af\u06cc AJAX \u0631\u0627 \u062f\u0631 \u0622\u0646 \u062a\u0639\u0631\u06cc\u0641 \u062e\u0648\u0627\u0647\u0645 \u06a9\u0631\u062f <code>api\/index.js<\/code>\u060c \u06a9\u0647 \u0645\u0646 \u0627\u0632 \u0622\u0646 \u062a\u0645\u0627\u0633 \u0645\u06cc \u06af\u06cc\u0631\u0645 <code>Survey<\/code> \u0627\u062c\u0632\u0627\u0621 <code>beforeMount<\/code> hook  \u0628\u0631\u0627\u06cc \u0648\u0627\u06a9\u0634\u06cc \u0646\u0638\u0631\u0633\u0646\u062c\u06cc \u062a\u0648\u0633\u0637 <code>:id<\/code>.  \u06a9\u0647 \u062f\u0631 <code>api\/index.js<\/code> \u062a\u0627\u0628\u0639 \u0632\u06cc\u0631 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-keyword\">const<\/span> surveys = ({\n  <span class=\"hljs-attr\">id<\/span>: <span class=\"hljs-number\">1<\/span>,\n  <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">'Dogs'<\/span>,\n  <span class=\"hljs-comment\">\/\/ ... omitted for brevity <\/span>\n}, {\n  <span class=\"hljs-attr\">id<\/span>: <span class=\"hljs-number\">2<\/span>,\n  <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">'Cars'<\/span>,\n  <span class=\"hljs-comment\">\/\/ ... omitted for brevity <\/span>\n})\n\n<span class=\"hljs-comment\">\/\/ ... omitted for brevity<\/span>\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">fetchSurvey<\/span> (<span class=\"hljs-params\">surveyId<\/span>) <\/span>{\n  <span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-keyword\">new<\/span> <span class=\"hljs-built_in\">Promise<\/span>(<span class=\"hljs-function\">(<span class=\"hljs-params\">resolve, reject<\/span>) =&gt;<\/span> {\n    <span class=\"hljs-built_in\">setTimeout<\/span>(<span class=\"hljs-function\">() =&gt;<\/span> {\n      <span class=\"hljs-keyword\">const<\/span> survey = surveys.find(<span class=\"hljs-function\"><span class=\"hljs-params\">survey<\/span> =&gt;<\/span> survey.id === surveyId)\n      <span class=\"hljs-keyword\">if<\/span> (survey) {\n        resolve(survey)\n      } <span class=\"hljs-keyword\">else<\/span> {\n        reject(<span class=\"hljs-built_in\">Error<\/span>(<span class=\"hljs-string\">'Survey does not exist'<\/span>))\n      }\n    }, <span class=\"hljs-number\">300<\/span>)\n  })\n}\n<\/code><\/pre>\n<p>\u062f\u0631 \u062d\u0627\u0644 \u062d\u0627\u0636\u0631 \u0628\u0627\u0632\u06af\u0634\u062a \u0628\u0647 <code>Survey<\/code> \u062c\u0632\u0621 \u0645\u0646 \u0646\u06cc\u0627\u0632 \u0628\u0647 import <code>fetchSurvey<\/code>  \u0648 \u0627\u0632 \u0622\u0646 \u062f\u0631 <code>beforeMount<\/code> \u0628\u0631\u0627\u06cc \u0628\u0627\u0632\u06cc\u0627\u0628\u06cc \u0646\u0638\u0631\u0633\u0646\u062c\u06cc \u062f\u0631\u062e\u0648\u0627\u0633\u062a\u06cc  \u062f\u0648\u0628\u0627\u0631\u0647 \u0628\u0631\u0627\u06cc \u0627\u0647\u062f\u0627\u0641 \u0628\u0635\u0631\u06cc\u060c \u0646\u0627\u0645 \u0646\u0638\u0631\u0633\u0646\u062c\u06cc \u0631\u0627 \u062f\u0631 \u0642\u0627\u0644\u0628 \u06cc\u06a9 \u062e\u0631\u0648\u062c\u06cc \u0645\u06cc\u200c\u062f\u0647\u0645 <code>bulma<\/code> \u0647\u062f\u0631 \u0642\u0647\u0631\u0645\u0627\u0646<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">section<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"hero is-primary\"<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"hero-body\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"container has-text-centered\"<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h2<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"title\"<\/span>&gt;<\/span>{{ survey.name }}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h2<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">section<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n<span class=\"hljs-keyword\">import<\/span> { fetchSurvey } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'@\/api'<\/span>\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> {\n  <span class=\"hljs-function\"><span class=\"hljs-title\">data<\/span>(<span class=\"hljs-params\"><\/span>)<\/span> {\n    <span class=\"hljs-keyword\">return<\/span> {\n      <span class=\"hljs-attr\">survey<\/span>: {}\n    }\n  },\n  <span class=\"hljs-function\"><span class=\"hljs-title\">beforeMount<\/span>(<span class=\"hljs-params\"><\/span>)<\/span> {\n    fetchSurvey(<span class=\"hljs-built_in\">parseInt<\/span>(<span class=\"hljs-built_in\">this<\/span>.$route.params.id))\n      .then(<span class=\"hljs-function\">(<span class=\"hljs-params\">response<\/span>) =&gt;<\/span> {\n        <span class=\"hljs-built_in\">this<\/span>.survey = response\n      })\n  }\n}\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">style<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">style<\/span>&gt;<\/span>\n<\/code><\/pre>\n<p>\u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc URL \u0645\u0631\u0648\u0631\u06af\u0631 \u0628\u0647 localhost:8080\/surveys\/2\u060c \u0622\u0646\u0686\u0647 \u0631\u0627 \u06a9\u0647 \u062f\u0631 \u0632\u06cc\u0631 \u0646\u0634\u0627\u0646 \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a \u0645\u06cc \u0628\u06cc\u0646\u0645:<\/p>\n<p><img decoding=\"async\" class=\"img-responsive\" src=\"https:\/\/rasanegar.com\/blog\/wp-content\/uploads\/2024\/01\/single-page-apps-vue-and-flask-navigating-vue-router-5.png\" alt=\"\u0633\u0631\u0628\u0631\u06af \u0646\u0638\u0631\u0633\u0646\u062c\u06cc\" title=\"\"><\/p>\n<p>\u062e\u06cc\u0644\u06cc \u0628\u0627\u062d\u0627\u0644\u0647 \u062f\u0631\u0633\u062a\u0647\u061f<\/p>\n<p>\u062f\u0631 \u0645\u0631\u062d\u0644\u0647 \u0628\u0639\u062f \u0645\u06cc \u062e\u0648\u0627\u0647\u0645 \u06a9\u0627\u0631\u06cc \u06a9\u0645\u06cc \u0645\u0641\u06cc\u062f\u062a\u0631 \u0628\u0627 \u062e\u0648\u062f\u0645 \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u0645 <code>Survey<\/code> \u062c\u0632\u0621 \u0648 \u0634\u0627\u0645\u0644 \u0633\u0624\u0627\u0644\u0627\u062a \u0648 \u0627\u0646\u062a\u062e\u0627\u0628 \u0647\u0627 \u0628\u0627\u0634\u062f.<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    <span class=\"hljs-comment\">&lt;!-- omitted survey name header for brevity --&gt;<\/span>\n\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">section<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"section\"<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"container\"<\/span>&gt;<\/span>\n\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"columns\"<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"column is-10 is-offset-1\"<\/span>&gt;<\/span>\n\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">v-for<\/span>=<span class=\"hljs-string\">\"question in survey.questions\"<\/span> <span class=\"hljs-attr\">v-bind:key<\/span>=<span class=\"hljs-string\">\"question.id\"<\/span>&gt;<\/span>\n\n                  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"column is-offset-3 is-6\"<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h4<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">'title has-text-centered'<\/span>&gt;<\/span>{{ question.text }}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h4<\/span>&gt;<\/span>\n                  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n                  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"column is-offset-4 is-4\"<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"control\"<\/span>&gt;<\/span>\n                      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">v-for<\/span>=<span class=\"hljs-string\">\"choice in question.choices\"<\/span> <span class=\"hljs-attr\">v-bind:key<\/span>=<span class=\"hljs-string\">\"choice.id\"<\/span>&gt;<\/span>\n                        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"radio\"<\/span>&gt;<\/span>\n                        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"radio\"<\/span> <span class=\"hljs-attr\">v-model<\/span>=<span class=\"hljs-string\">\"question.choice\"<\/span> <span class=\"hljs-attr\">:value<\/span>=<span class=\"hljs-string\">\"choice.id\"<\/span>&gt;<\/span>\n                        {{ choice.text }}\n                      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">label<\/span>&gt;<\/span>\n                      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n                  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">section<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n<\/code><\/pre>\n<p>\u0645\u062c\u062f\u062f\u0627\u064b \u0645\u0631\u0648\u0631\u06af\u0631 \u0631\u0627 \u0628\u0627 URL \u0630\u062e\u06cc\u0631\u0647 \u0648 \u0628\u0647 \u0631\u0648\u0632 \u06a9\u0646\u06cc\u062f <a rel=\"nofollow noopener\" target=\"_blank\" href=\"8080\/#\/surveys\/2\" class=\"broken_link\">localhost:8080\/#\/surveys\/2<\/a> \u0627\u06a9\u0646\u0648\u0646 \u0641\u0647\u0631\u0633\u062a\u06cc \u0627\u0632 \u0633\u0648\u0627\u0644\u0627\u062a \u0648 \u06af\u0632\u06cc\u0646\u0647 \u0647\u0627\u06cc \u0645\u0648\u062c\u0648\u062f \u0628\u0631\u0627\u06cc \u0646\u0638\u0631\u0633\u0646\u062c\u06cc \u062e\u0648\u062f\u0631\u0648\u0647\u0627 \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f.<\/p>\n<p><img decoding=\"async\" class=\"img-responsive\" src=\"https:\/\/rasanegar.com\/blog\/wp-content\/uploads\/2024\/01\/single-page-apps-vue-and-flask-navigating-vue-router-6.png\" alt=\"\u0633\u0648\u0627\u0644\u0627\u062a \u0646\u0638\u0631\u0633\u0646\u062c\u06cc\" title=\"\"><\/p>\n<p>\u0627\u062c\u0627\u0632\u0647 \u062f\u0647\u06cc\u062f \u0633\u0639\u06cc \u06a9\u0646\u0645 \u0628\u0631\u062e\u06cc \u0627\u0632 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u062c\u062f\u06cc\u062f Vue \u0631\u0627 \u06a9\u0647 \u062f\u0631 \u062d\u0627\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0647\u0633\u062a\u0646\u062f \u0628\u0627\u0632 \u06a9\u0646\u0645.  \u0645\u0627 \u0642\u0628\u0644\u0627\u064b \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0622\u0646 \u0622\u0634\u0646\u0627 \u0647\u0633\u062a\u06cc\u0645 <code>v-for<\/code> \u062f\u0633\u062a\u0648\u0631\u0627\u0644\u0639\u0645\u0644\u06cc \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0633\u0624\u0627\u0644\u0627\u062a \u0648 \u0627\u0646\u062a\u062e\u0627\u0628 \u0647\u0627\u06cc \u0646\u0638\u0631\u0633\u0646\u062c\u06cc\u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0627\u0645\u06cc\u062f\u0648\u0627\u0631\u06cc\u0645 \u06a9\u0647 \u0628\u062a\u0648\u0627\u0646\u06cc\u062f \u0631\u0648\u0634 \u0646\u0645\u0627\u06cc\u0634 \u0622\u0646\u0647\u0627 \u0631\u0627 \u067e\u06cc\u06af\u06cc\u0631\u06cc \u06a9\u0646\u06cc\u062f.  \u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644\u060c \u0627\u06af\u0631 \u062a\u0645\u0631\u06a9\u0632 \u06a9\u0646\u06cc\u062f \u0631\u0648\u06cc \u0686\u06af\u0648\u0646\u0647 \u062f\u06a9\u0645\u0647\u200c\u0647\u0627\u06cc \u0631\u0627\u062f\u06cc\u0648\u06cc\u06cc \u0628\u0631\u0627\u06cc \u0627\u0646\u062a\u062e\u0627\u0628 \u06cc\u06a9 \u0633\u0624\u0627\u0644 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc\u200c\u0634\u0648\u0646\u062f\u060c \u0645\u062a\u0648\u062c\u0647 \u062e\u0648\u0627\u0647\u06cc\u062f \u0634\u062f \u06a9\u0647 \u0645\u0646 \u062f\u0648 \u06a9\u0627\u0631 \u062c\u062f\u06cc\u062f \u06cc\u0627 \u06a9\u0645\u06cc \u0645\u062a\u0641\u0627\u0648\u062a \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc\u200c\u062f\u0647\u0645.<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">v-for<\/span>=<span class=\"hljs-string\">\"choice in question.choices\"<\/span> <span class=\"hljs-attr\">v-bind:key<\/span>=<span class=\"hljs-string\">\"choice.id\"<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"radio\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"radio\"<\/span> <span class=\"hljs-attr\">v-model<\/span>=<span class=\"hljs-string\">\"question.choice\"<\/span> <span class=\"hljs-attr\">:value<\/span>=<span class=\"hljs-string\">\"choice.id\"<\/span>&gt;<\/span>\n    {{ choice.text }}\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">label<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/code><\/pre>\n<p>\u0628\u0631\u0627\u06cc \u0648\u0631\u0648\u062f\u06cc \u0631\u0627\u062f\u06cc\u0648\u06cc\u06cc \u0645\u0646 \u0627\u0632 <code>v-model<\/code> \u0628\u062e\u0634\u0646\u0627\u0645\u0647 \u0648 \u0622\u0646 \u0631\u0627 \u0628\u0627 \u0627\u0631\u0632\u0634 \u0639\u0631\u0636\u0647 \u06a9\u0631\u062f <code>question.choice<\/code>.  \u06a9\u0627\u0631\u06cc \u06a9\u0647 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u062f\u0647\u062f \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u06cc\u06a9 \u0639\u0636\u0648 \u062c\u062f\u06cc\u062f \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f \u0631\u0648\u06cc \u0631\u0627 <code>question<\/code> \u0634\u06cc\u0621 \u0627\u0646\u062a\u062e\u0627\u0628 \u0646\u0627\u0645\u06cc\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f \u0648 \u0622\u0646 \u0631\u0627 \u0628\u0627 \u0648\u0631\u0648\u062f\u06cc \u0631\u0627\u062f\u06cc\u0648\u06cc\u06cc \u062b\u0628\u062a \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0628\u0647 \u062f\u0627\u062f\u0647 \u0647\u0627 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f \u0627\u0632 \u0648\u0631\u0648\u062f\u06cc \u0631\u0627\u062f\u06cc\u0648\u06cc\u06cc \u0648\u0627\u0642\u0639\u06cc \u0628\u0647 \u062f\u0627\u062e\u0644 \u062c\u0631\u06cc\u0627\u0646 \u067e\u06cc\u062f\u0627 \u06a9\u0646\u0646\u062f <code>question.choice<\/code> \u0648\u06cc\u0698\u06af\u06cc \u0634\u06cc  \u0645\u0646 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0627\u0632 \u06cc\u06a9 \u0646\u062d\u0648 \u0645\u062e\u062a\u0635\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u0645 <code>:value<\/code> \u0628\u062c\u0627\u06cc <code>v-bind:value<\/code> \u0628\u0631\u0627\u06cc \u067e\u06cc\u0648\u0646\u062f \u062f\u0627\u062f\u0646 \u0645\u0642\u062f\u0627\u0631 \u0627\u06cc\u0646 \u0648\u0631\u0648\u062f\u06cc \u0631\u0627\u062f\u06cc\u0648\u06cc\u06cc \u0628\u0647 \u0645\u0642\u062f\u0627\u0631 \u06af\u0632\u06cc\u0646\u0647\u200c\u0647\u0627\u06cc \u0633\u0624\u0627\u0644\u06cc \u06a9\u0647 \u062f\u0631 \u062d\u0627\u0644 \u062a\u06a9\u0631\u0627\u0631 \u0647\u0633\u062a\u0646\u062f <code>v-for<\/code>.<\/p>\n<p><em>\u06a9\u0646\u0627\u0631 2 &#8211; \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062f\u0633\u062a\u0648\u0631 v-model<\/em><\/p>\n<p>\u0645\u062a\u0648\u062c\u0647 \u0645\u06cc \u0634\u0648\u0645 \u06a9\u0647 <code>v-model<\/code> \u0645\u0641\u0647\u0648\u0645 \u0627\u062d\u062a\u0645\u0627\u0644\u0627\u064b \u06a9\u0645\u06cc \u0645\u0628\u0647\u0645 \u0627\u0633\u062a\u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0627\u062c\u0627\u0632\u0647 \u062f\u0647\u06cc\u062f \u0645\u0646 \u0631\u0627 \u06a9\u0646\u0627\u0631 \u0628\u06af\u0630\u0627\u0631\u0645 \u0648 \u0645\u062b\u0627\u0644 \u0633\u0627\u062f\u0647 \u062f\u06cc\u06af\u0631\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc \u0646\u0634\u0627\u0646 \u062f\u0627\u062f\u0646 \u0645\u0648\u0636\u0648\u0639 \u0628\u06cc\u0627\u0646 \u06a9\u0646\u0645.  \u0645\u062b\u0627\u0644 \u0628\u06cc \u0627\u0647\u0645\u06cc\u062a \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0631 \u0646\u0638\u0631 \u0628\u06af\u06cc\u0631\u06cc\u062f.  \u0645\u062c\u062f\u062f\u0627\u064b \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0646\u0645\u0648\u0646\u0647 \u06a9\u0627\u0631 \u0627\u06cc\u0646 \u06a9\u062f \u0631\u0627 \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u06cc\u062f <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/jsfiddle.net\/amcquistan\/grq3qj36\/\">\u0627\u06cc\u0646\u062c\u0627<\/a>.<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-comment\">&lt;!-- index.html --&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/unpkg.com\/vue\/dist\/vue.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"app\"<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label<\/span> <span class=\"hljs-attr\">for<\/span>=<span class=\"hljs-string\">\"name\"<\/span>&gt;<\/span>What is your name<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">label<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"name\"<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"text\"<\/span> <span class=\"hljs-attr\">v-model<\/span>=<span class=\"hljs-string\">\"textInput\"<\/span> \/&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span>&gt;<\/span>Hello {{ textInput }}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h4<\/span>&gt;<\/span>Which do you like better?<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h4<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">v-for<\/span>=<span class=\"hljs-string\">\"choice in radioChoices\"<\/span> <span class=\"hljs-attr\">:key<\/span>=<span class=\"hljs-string\">\"choice\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label<\/span>&gt;<\/span>{{ choice }}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">label<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"fruit\"<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"radio\"<\/span> <span class=\"hljs-attr\">v-model<\/span>=<span class=\"hljs-string\">\"favoriteFruit\"<\/span> <span class=\"hljs-attr\">:value<\/span>=<span class=\"hljs-string\">\"choice\"<\/span>\/&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h4<\/span>&gt;<\/span>So you like {{ favoriteFruit }}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h4<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n<span class=\"hljs-keyword\">new<\/span> Vue({\n  <span class=\"hljs-attr\">el<\/span>: <span class=\"hljs-string\">'#app'<\/span>,\n  <span class=\"hljs-attr\">data<\/span>: {\n    <span class=\"hljs-attr\">textInput<\/span>: <span class=\"hljs-string\">''<\/span>,\n    <span class=\"hljs-attr\">radioChoices<\/span>: (<span class=\"hljs-string\">'apples'<\/span>, <span class=\"hljs-string\">'oranges'<\/span>),\n    <span class=\"hljs-attr\">favoriteFruit<\/span>: <span class=\"hljs-string\">''<\/span>\n  }\n})\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<\/code><\/pre>\n<p>\u0627\u0648\u0644\u06cc\u0646 \u0648\u0631\u0648\u062f\u06cc \u06cc\u06a9 \u0648\u0631\u0648\u062f\u06cc \u0645\u062a\u0646\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0646\u0627\u0645 \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u0645\u06cc\u200c\u067e\u0631\u0633\u062f.  \u0627\u06cc\u0646 \u0648\u0631\u0648\u062f\u06cc \u0645\u062a\u0646 \u062f\u0627\u0631\u0627\u06cc \u06cc\u06a9 <code>v-model<\/code> \u0628\u0627 \u0648\u06cc\u0698\u06af\u06cc \u062f\u0627\u062f\u0647 \u062f\u0631 \u0622\u0646 \u062b\u0628\u062a \u0634\u062f\u0647 \u0627\u0633\u062a <code>textInput<\/code> \u0628\u0647 \u0622\u0646 \u0645\u062a\u0635\u0644 \u0645\u06cc \u0634\u0648\u062f\u060c \u06a9\u0647 \u0648\u0631\u0648\u062f\u06cc \u0645\u062a\u0646 \u0631\u0627 \u0628\u0627 \u0622\u0646 \u0647\u0645\u06af\u0627\u0645 \u0646\u06af\u0647 \u0645\u06cc \u062f\u0627\u0631\u062f <code>textInput<\/code> \u0648\u06cc\u0698\u06af\u06cc \u062f\u0627\u062f\u0647 \u0627\u0632 <code>Vue<\/code> \u0646\u0645\u0648\u0646\u0647\u060c \u0645\u062b\u0627\u0644.  \u06cc\u06a9 \u062b\u0627\u0646\u06cc\u0647 \u0648\u0642\u062a \u0628\u06af\u0630\u0627\u0631\u06cc\u062f \u0648 \u0646\u0627\u0645 \u062e\u0648\u062f \u0631\u0627 \u062f\u0631 \u0648\u0631\u0648\u062f\u06cc \u0645\u062a\u0646 \u062a\u0627\u06cc\u067e \u06a9\u0646\u06cc\u062f \u0648 \u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc \u0622\u0646 \u0631\u0627 \u062f\u0631 \u0648\u0631\u0648\u062f\u06cc \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u06cc\u062f <code>&lt;span&gt;Hello {{ textInput }}&lt;\/span&gt;<\/code> \u062e\u0631\u0648\u062c\u06cc HTML<\/p>\n<p>\u0634\u06af\u0641\u062a \u0627\u0646\u06af\u06cc\u0632 \u062f\u0631\u0633\u062a \u0627\u0633\u062a\u061f<\/p>\n<p>\u0648\u0631\u0648\u062f\u06cc \u062f\u0648\u0645 \u06cc\u06a9 \u0648\u0631\u0648\u062f\u06cc \u0631\u0627\u062f\u06cc\u0648\u06cc\u06cc \u0628\u0647 \u0646\u0627\u0645 &#8220;\u0645\u06cc\u0648\u0647&#8221; \u0627\u0633\u062a \u06a9\u0647 \u0645\u06cc\u0648\u0647 \u0647\u0627\u06cc &#8220;\u0633\u06cc\u0628&#8221; \u0648 &#8220;\u067e\u0631\u062a\u0642\u0627\u0644&#8221; \u0631\u0627 \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc \u062f\u0647\u062f \u0648 \u0627\u0632 \u06a9\u0627\u0631\u0628\u0631 \u0645\u06cc \u062e\u0648\u0627\u0647\u062f \u0645\u0648\u0631\u062f \u0639\u0644\u0627\u0642\u0647 \u062e\u0648\u062f \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u062f.  \u0648\u0631\u0648\u062f\u06cc \u0631\u0627\u062f\u06cc\u0648 \u0628\u0647 \u062b\u0628\u062a \u0645\u06cc \u0634\u0648\u062f <code>favoriteFruit<\/code> \u0648\u06cc\u0698\u06af\u06cc \u062f\u0627\u062f\u0647 \u0627\u0632 <code>Vue<\/code> \u0646\u0645\u0648\u0646\u0647 \u0627\u0632 \u0637\u0631\u06cc\u0642 <code>v-model<\/code>\u060c \u06a9\u0647 \u0645\u0642\u062f\u0627\u0631 \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 \u0647\u0631 \u0648\u0631\u0648\u062f\u06cc \u0631\u0627\u062f\u06cc\u0648\u06cc\u06cc \u0631\u0627 \u0627\u0632 \u0637\u0631\u06cc\u0642 <code>:value=\"choice\"<\/code> \u0648\u06cc\u0698\u06af\u06cc binding syntax \u0628\u0631\u0627\u06cc \u0646\u06af\u0647 \u062f\u0627\u0634\u062a\u0646 <code>favoriteFruit<\/code> \u0647\u0645\u06af\u0627\u0645 \u0628\u0627 \u0648\u0631\u0648\u062f\u06cc \u0631\u0627\u062f\u06cc\u0648\u06cc\u06cc \u0627\u0646\u062a\u062e\u0627\u0628 \u0634\u062f\u0647  \u0628\u0627\u0632 \u0647\u0645 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0631\u0632\u0634 \u0622\u0646 \u0631\u0627 \u062a\u0645\u0627\u0634\u0627 \u06a9\u0646\u06cc\u062f <code>favoriteFruit<\/code> \u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc \u062f\u0631 <code>&lt;h4&gt;So you like {{ favoriteFruit }}&lt;\/h4&gt;<\/code> \u062e\u0631\u0648\u062c\u06cc \u0639\u0646\u0635\u0631<\/p>\n<p>\u062f\u0631 \u0632\u06cc\u0631 \u0686\u0646\u062f \u0646\u0645\u0648\u0646\u0647 \u062e\u0631\u0648\u062c\u06cc \u0631\u0627 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u0645.  \u0645\u0646 \u0634\u0645\u0627 \u0631\u0627 \u062a\u0634\u0648\u06cc\u0642 \u0645\u06cc \u06a9\u0646\u0645 \u062a\u0627 \u0628\u0627 \u0627\u06cc\u0646 \u0645\u062b\u0627\u0644 \u0628\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f <code>v-model<\/code> \u0648\u0627\u0636\u062d \u0627\u0633\u062a.<\/p>\n<p><img decoding=\"async\" class=\"img-responsive\" src=\"https:\/\/rasanegar.com\/blog\/wp-content\/uploads\/2024\/01\/single-page-apps-vue-and-flask-navigating-vue-router-7.png\" alt=\"v-model binding\" title=\"\"><\/p>\n<h2 id=\"completingthesurveytakingexperience\"><span class=\"ez-toc-section\" id=\"%d8%aa%da%a9%d9%85%db%8c%d9%84_%d8%aa%d8%ac%d8%b1%d8%a8%d9%87_%d9%86%d8%b8%d8%b1%d8%b3%d9%86%d8%ac%db%8c\"><\/span>\u062a\u06a9\u0645\u06cc\u0644 \u062a\u062c\u0631\u0628\u0647 \u0646\u0638\u0631\u0633\u0646\u062c\u06cc<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062e\u0648\u0628\u060c \u0628\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0638\u0631\u0633\u0646\u062c\u06cc \u0628\u0631\u06af\u0631\u062f\u06cc\u062f.  \u0628\u0647 \u0645\u0648\u0631\u062f\u06cc \u0641\u06a9\u0631 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u062f\u0631 \u0646\u0638\u0631\u0633\u0646\u062c\u06cc \u0633\u0624\u0627\u0644\u0627\u062a \u0628\u06cc\u0634\u062a\u0631\u06cc \u062f\u0631 \u0632\u06cc\u0631 \u0627\u0631\u062a\u0641\u0627\u0639 \u067e\u06cc\u0634 \u0641\u0631\u0636 \u0635\u0641\u062d\u0647 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.  \u0628\u0647 \u0637\u0648\u0631 \u06a9\u0644\u06cc\u060c \u0645\u0627 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u0645\u0631\u062f\u0645 \u0631\u0627 \u0627\u0632 \u0631\u0641\u062a\u0646 \u0628\u0647 \u067e\u0627\u06cc\u06cc\u0646 \u0628\u0631\u0627\u06cc \u062f\u06cc\u062f\u0646 \u0645\u0647\u0645 \u062a\u0631\u06cc\u0646 \u0645\u062d\u062a\u0648\u0627\u06cc \u0634\u0645\u0627 \u0628\u0627\u0632 \u062f\u0627\u0631\u06cc\u0645.  \u06cc\u06a9 \u0627\u0646\u062a\u062e\u0627\u0628 \u0628\u0647\u062a\u0631 \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u062f\u0631 \u0645\u06cc\u0627\u0646 \u0633\u0648\u0627\u0644\u0627\u062a\u06cc \u06a9\u0647 \u06cc\u06a9 \u0633\u0648\u0627\u0644 \u0648 \u067e\u0627\u0633\u062e \u0647\u0627\u06cc \u0622\u0646 \u0631\u0627 \u062f\u0631 \u06cc\u06a9 \u0632\u0645\u0627\u0646 \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc \u062f\u0647\u0646\u062f \u0635\u0641\u062d\u0647 \u0628\u0646\u062f\u06cc \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u0628\u0647 \u0631\u0648\u0632 \u0634\u062f\u0647 \u0627\u0633\u062a <code>Survey<\/code> \u062c\u0632\u0621 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0631\u0627 \u062f\u0631 \u0632\u06cc\u0631 \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u062f\u0647\u062f.<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    <span class=\"hljs-comment\">&lt;!-- omitted for brevity --&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">section<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"section\"<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"container\"<\/span>&gt;<\/span>\n\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"columns\"<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"column is-10 is-offset-1\"<\/span>&gt;<\/span>\n\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>\n              <span class=\"hljs-attr\">v-for<\/span>=<span class=\"hljs-string\">\"(question, idx) in survey.questions\"<\/span> &lt;!<span class=\"hljs-attr\">--<\/span> <span class=\"hljs-attr\">modified<\/span> <span class=\"hljs-attr\">v-for<\/span> <span class=\"hljs-attr\">--<\/span>&gt;<\/span>\n              v-bind:key=\"question.id\"\n              v-show=\"currentQuestion === idx\"&gt; <span class=\"hljs-comment\">&lt;!-- new v-show directive --&gt;<\/span>\n\n                  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"column is-offset-3 is-6\"<\/span>&gt;<\/span>\n                    <span class=\"hljs-comment\">&lt;!-- &lt;h4 class='title'&gt;{{ idx }}) {{ question.text }}&lt;\/h4&gt; --&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h4<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">'title has-text-centered'<\/span>&gt;<\/span>{{ question.text }}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h4<\/span>&gt;<\/span>\n                  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n                  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"column is-offset-4 is-4\"<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"control\"<\/span>&gt;<\/span>\n                      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">v-for<\/span>=<span class=\"hljs-string\">\"choice in question.choices\"<\/span> <span class=\"hljs-attr\">v-bind:key<\/span>=<span class=\"hljs-string\">\"choice.id\"<\/span>&gt;<\/span>\n                        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"radio\"<\/span>&gt;<\/span>\n                        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"radio\"<\/span> <span class=\"hljs-attr\">v-model<\/span>=<span class=\"hljs-string\">\"question.choice\"<\/span> <span class=\"hljs-attr\">:value<\/span>=<span class=\"hljs-string\">\"choice.id\"<\/span>&gt;<\/span>\n                        {{ choice.text }}\n                        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">label<\/span>&gt;<\/span>\n                      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n                  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n            <span class=\"hljs-comment\">&lt;!-- new pagination buttons --&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"column is-offset-one-quarter is-half\"<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">nav<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"pagination is-centered\"<\/span> <span class=\"hljs-attr\">role<\/span>=<span class=\"hljs-string\">\"navigation\"<\/span> <span class=\"hljs-attr\">aria-label<\/span>=<span class=\"hljs-string\">\"pagination\"<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"pagination-previous\"<\/span> @<span class=\"hljs-attr\">click.stop<\/span>=<span class=\"hljs-string\">\"goToPreviousQuestion\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">i<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"fa fa-chevron-left\"<\/span> <span class=\"hljs-attr\">aria-hidden<\/span>=<span class=\"hljs-string\">\"true\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">i<\/span>&gt;<\/span> <span class=\"hljs-symbol\">&amp;nbsp;<\/span><span class=\"hljs-symbol\">&amp;nbsp;<\/span> Back<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"pagination-next\"<\/span> @<span class=\"hljs-attr\">click.stop<\/span>=<span class=\"hljs-string\">\"goToNextQuestion\"<\/span>&gt;<\/span>Next <span class=\"hljs-symbol\">&amp;nbsp;<\/span><span class=\"hljs-symbol\">&amp;nbsp;<\/span> <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">i<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"fa fa-chevron-right\"<\/span> <span class=\"hljs-attr\">aria-hidden<\/span>=<span class=\"hljs-string\">\"true\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">i<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">nav<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n            <span class=\"hljs-comment\">&lt;!-- new submit button --&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"column has-text-centered\"<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">v-if<\/span>=<span class=\"hljs-string\">\"surveyComplete\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">'button is-focused is-primary is-large'<\/span>\n                @<span class=\"hljs-attr\">click.stop<\/span>=<span class=\"hljs-string\">\"handleSubmit\"<\/span>&gt;<\/span>\n                Submit\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">section<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n<span class=\"hljs-keyword\">import<\/span> { fetchSurvey, saveSurveyResponse } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'@\/api'<\/span> <span class=\"hljs-comment\">\/\/ new AJAX func<\/span>\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> {\n  <span class=\"hljs-function\"><span class=\"hljs-title\">data<\/span>(<span class=\"hljs-params\"><\/span>)<\/span> {\n    <span class=\"hljs-keyword\">return<\/span> {\n      <span class=\"hljs-attr\">survey<\/span>: {},\n      <span class=\"hljs-attr\">currentQuestion<\/span>: <span class=\"hljs-number\">0<\/span>  <span class=\"hljs-comment\">\/\/ new data prop<\/span>\n    }\n  },\n  <span class=\"hljs-function\"><span class=\"hljs-title\">beforeMount<\/span>(<span class=\"hljs-params\"><\/span>)<\/span> {\n    <span class=\"hljs-comment\">\/\/ omitted for brevity<\/span>\n  },\n  <span class=\"hljs-attr\">methods<\/span>: { <span class=\"hljs-comment\">\/\/ new Vue obj member<\/span>\n    <span class=\"hljs-function\"><span class=\"hljs-title\">goToNextQuestion<\/span>(<span class=\"hljs-params\"><\/span>)<\/span> {\n      <span class=\"hljs-keyword\">if<\/span> (<span class=\"hljs-built_in\">this<\/span>.currentQuestion === <span class=\"hljs-built_in\">this<\/span>.survey.questions.length - <span class=\"hljs-number\">1<\/span>) {\n        <span class=\"hljs-built_in\">this<\/span>.currentQuestion = <span class=\"hljs-number\">0<\/span>\n      } <span class=\"hljs-keyword\">else<\/span> {\n        <span class=\"hljs-built_in\">this<\/span>.currentQuestion++\n      }\n    },\n    <span class=\"hljs-function\"><span class=\"hljs-title\">goToPreviousQuestion<\/span>(<span class=\"hljs-params\"><\/span>)<\/span> {\n      <span class=\"hljs-keyword\">if<\/span> (<span class=\"hljs-built_in\">this<\/span>.currentQuestion === <span class=\"hljs-number\">0<\/span>) {\n        <span class=\"hljs-built_in\">this<\/span>.currentQuestion = <span class=\"hljs-built_in\">this<\/span>.survey.questions.lenth - <span class=\"hljs-number\">1<\/span>\n      } <span class=\"hljs-keyword\">else<\/span> {\n        <span class=\"hljs-built_in\">this<\/span>.currentQuestion--\n      }\n    },\n    <span class=\"hljs-function\"><span class=\"hljs-title\">handleSubmit<\/span>(<span class=\"hljs-params\"><\/span>)<\/span> {\n      saveSurveyResponse(<span class=\"hljs-built_in\">this<\/span>.survey)\n        .then(<span class=\"hljs-function\">() =&gt;<\/span> <span class=\"hljs-built_in\">this<\/span>.$router.push(<span class=\"hljs-string\">'\/'<\/span>))\n    }\n  },\n  <span class=\"hljs-attr\">computed<\/span>: {  <span class=\"hljs-comment\">\/\/ new Vue obj member<\/span>\n    <span class=\"hljs-function\"><span class=\"hljs-title\">surveyComplete<\/span>(<span class=\"hljs-params\"><\/span>)<\/span> {\n      <span class=\"hljs-keyword\">if<\/span> (<span class=\"hljs-built_in\">this<\/span>.survey.questions) {\n        <span class=\"hljs-keyword\">const<\/span> numQuestions = <span class=\"hljs-built_in\">this<\/span>.survey.questions.length\n        <span class=\"hljs-keyword\">const<\/span> numCompleted = <span class=\"hljs-built_in\">this<\/span>.survey.questions.filter(<span class=\"hljs-function\"><span class=\"hljs-params\">q<\/span> =&gt;<\/span> q.choice).length\n        <span class=\"hljs-keyword\">return<\/span> numQuestions === numCompleted\n      }\n      <span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-literal\">false<\/span>\n    }\n  }\n}\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<\/code><\/pre>\n<p>\u0627\u06cc\u0646 \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u0628\u0627 \u0647\u0645 \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u0646\u062f \u062a\u0627 \u062a\u062c\u0631\u0628\u0647 \u0646\u0638\u0631\u0633\u0646\u062c\u06cc \u0631\u0627 \u06a9\u0627\u0645\u0644 \u06a9\u0646\u0646\u062f.  \u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u06af\u0631\u0647 \u0647\u0627\u06cc \u0633\u0648\u0627\u0644 \u0627\u0632 \u062a\u0648\u0644\u06cc\u062f \u0645\u06cc \u0634\u0648\u0646\u062f <code>v-for=\"(question, idx) in survey.questions\"<\/code> \u0645\u0646 \u0627\u0632 <code>v-show=\"currentQuestion === idx\"<\/code> \u062f\u0633\u062a\u0648\u0631\u0627\u0644\u0639\u0645\u0644 \u0628\u0631\u0627\u06cc \u0622\u0632\u0645\u0627\u06cc\u0634 \u0627\u06cc\u0646\u06a9\u0647 \u0622\u06cc\u0627 \u0645\u0642\u062f\u0627\u0631 \u0648\u06cc\u0698\u06af\u06cc \u062f\u0627\u062f\u0647\u060c <code>currentQuestion<\/code>\u060c \u0628\u0627 \u0645\u0642\u062f\u0627\u0631 \u0645\u0637\u0627\u0628\u0642\u062a \u062f\u0627\u0631\u062f <code>idx<\/code>.  \u0627\u06cc\u0646 \u0633\u0648\u0627\u0644 \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f <code>div<\/code> \u0642\u0627\u0628\u0644 \u0645\u0634\u0627\u0647\u062f\u0647 \u0627\u0633\u062a \u0641\u0642\u0637 \u0627\u06af\u0631 <code>currentQuestion<\/code> \u0628\u0631\u0627\u0628\u0631 \u0628\u0627 \u0622\u0646 \u0633\u0648\u0627\u0644 \u0627\u0633\u062a <code>idx<\/code> \u0627\u0631\u0632\u0634.  \u0627\u0632 \u0622\u0646\u062c\u0627\u06cc\u06cc \u06a9\u0647 \u0627\u0631\u0632\u0634 <code>currectQuestion<\/code> \u0645\u0642\u062f\u0627\u0631 \u0627\u0648\u0644\u06cc\u0647 \u0635\u0641\u0631 \u0627\u0633\u062a\u060c \u0633\u0648\u0627\u0644 \u0635\u0641\u0631 \u0628\u0647 \u0637\u0648\u0631 \u067e\u06cc\u0634 \u0641\u0631\u0636 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n<p>\u062f\u0631 \u0632\u06cc\u0631 \u0633\u0624\u0627\u0644\u0627\u062a \u0648 \u067e\u0627\u0633\u062e\u200c\u0647\u0627\u060c \u062f\u06a9\u0645\u0647\u200c\u0647\u0627\u06cc \u0635\u0641\u062d\u0647\u200c\u0628\u0646\u062f\u06cc \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0627\u06cc\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0631\u0627 \u0645\u06cc\u200c\u062f\u0647\u062f \u06a9\u0647 \u0633\u0624\u0627\u0644\u0627\u062a \u0631\u0627 \u0635\u0641\u062d\u0647\u200c\u0628\u0646\u062f\u06cc \u06a9\u0646\u062f.  \u0639\u0646\u0635\u0631 \u062f\u06a9\u0645\u0647 &#8220;\u0628\u0639\u062f\u06cc&#8221; \u062f\u0627\u0631\u062f <code>@click=\"goToNextQuestion\"<\/code> \u062f\u0631 \u062f\u0627\u062e\u0644 \u0622\u0646\u060c \u06a9\u0647 \u06cc\u06a9 \u06a9\u0646\u062a\u0631\u0644 \u06a9\u0646\u0646\u062f\u0647 \u0631\u0648\u06cc\u062f\u0627\u062f \u06a9\u0644\u06cc\u06a9 Vue \u0627\u0633\u062a \u06a9\u0647 \u0628\u0627 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u067e\u0627\u0633\u062e \u0645\u06cc \u062f\u0647\u062f <code>goToNextQuestion<\/code> \u0639\u0645\u0644\u06a9\u0631\u062f \u062f\u0631 \u062f\u0627\u062e\u0644 \u062c\u062f\u06cc\u062f <code>methods<\/code> \u0648\u06cc\u0698\u06af\u06cc \u0634\u06cc\u0621 Vue.  \u06cc\u06a9 \u0634\u06cc\u0621 \u062c\u0632\u0621 Vue <code>methods<\/code> \u0628\u062e\u0634 \u062c\u0627\u06cc\u06cc \u0627\u0633\u062a \u06a9\u0647 \u062a\u0648\u0627\u0628\u0639 \u0631\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646 \u0628\u0631\u0627\u06cc \u0627\u0646\u062c\u0627\u0645 \u062a\u0639\u062f\u0627\u062f\u06cc \u06a9\u0627\u0631 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0631\u062f\u060c \u0627\u063a\u0644\u0628 \u0628\u0631\u0627\u06cc \u062a\u063a\u06cc\u06cc\u0631 \u062d\u0627\u0644\u062a \u062c\u0632\u0621.  \u0627\u06cc\u0646\u062c\u0627 <code>goToNextQuestion<\/code> \u0627\u0641\u0632\u0627\u06cc\u0634 <code>currentQuestion<\/code> \u06cc\u06a9\u06cc\u060c \u0633\u0648\u0627\u0644\u06cc \u06a9\u0647 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f \u0631\u0627 \u067e\u06cc\u0634 \u0645\u06cc \u0628\u0631\u062f \u06cc\u0627 \u0622\u0646 \u0631\u0627 \u0628\u0647 \u0633\u0648\u0627\u0644 \u0627\u0648\u0644 \u0628\u0627\u0632\u0646\u0634\u0627\u0646\u06cc \u0645\u06cc \u06a9\u0646\u062f.  \u062f\u06a9\u0645\u0647 \u0628\u0631\u06af\u0634\u062a \u0648 \u0645\u0631\u062a\u0628\u0637 \u0628\u0627 \u0622\u0646 <code>goToPreviousQuestion<\/code> \u0631\u0648\u0634 \u062f\u0642\u06cc\u0642\u0627 \u0628\u0631\u0639\u06a9\u0633 \u0639\u0645\u0644 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u0622\u062e\u0631\u06cc\u0646 \u062a\u063a\u06cc\u06cc\u0631\u060c \u0642\u0627\u0628\u0644\u06cc\u062a \u0627\u0631\u0633\u0627\u0644 \u067e\u0627\u0633\u062e \u0646\u0638\u0631\u0633\u0646\u062c\u06cc \u0627\u0633\u062a.  \u062f\u06a9\u0645\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f <code>v-show<\/code> \u062f\u0648\u0628\u0627\u0631\u0647 \u0628\u0631\u0627\u06cc \u062a\u0639\u06cc\u06cc\u0646 \u0627\u06cc\u0646\u06a9\u0647 \u0622\u06cc\u0627 \u062f\u06a9\u0645\u0647 \u0628\u0627\u06cc\u062f \u0628\u0631 \u0627\u0633\u0627\u0633 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0634\u0648\u062f \u06cc\u0627 \u062e\u06cc\u0631 \u0631\u0648\u06cc \u0645\u0642\u062f\u0627\u0631 \u06cc\u06a9 \u0648\u06cc\u0698\u06af\u06cc \u0645\u062d\u0627\u0633\u0628\u0647 \u0634\u062f\u0647 \u0628\u0647 \u0646\u0627\u0645 <code>surveyCompleted<\/code>.  \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0645\u062d\u0627\u0633\u0628\u0647 \u0634\u062f\u0647 \u06cc\u06a9\u06cc \u062f\u06cc\u06af\u0631 \u0627\u0632 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0639\u0627\u0644\u06cc Vue \u0627\u0633\u062a.  \u0622\u0646\u0647\u0627 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc\u06cc \u0647\u0633\u062a\u0646\u062f \u06a9\u0647 \u0645\u0639\u0645\u0648\u0644\u0627\u064b \u0631\u0648\u0634 \u0646\u0645\u0627\u06cc\u0634 \u0627\u062c\u0632\u0627\u06cc UI \u0631\u0627 \u06a9\u0646\u062a\u0631\u0644 \u0645\u06cc \u06a9\u0646\u0646\u062f \u06a9\u0647 \u0648\u0642\u062a\u06cc \u0645\u0646\u0637\u0642 \u06a9\u0645\u06cc \u067e\u06cc\u0686\u06cc\u062f\u0647 \u062a\u0631 \u0627\u0632 \u0628\u0631\u0631\u0633\u06cc \u06cc\u06a9 \u0645\u0642\u062f\u0627\u0631 \u0648\u0627\u062d\u062f \u0627\u0632 \u06cc\u06a9 \u0648\u06cc\u0698\u06af\u06cc \u062f\u0627\u062f\u0647 \u0628\u0627\u0634\u062f\u060c \u0645\u0641\u06cc\u062f \u0647\u0633\u062a\u0646\u062f.  \u0628\u0647 \u0627\u06cc\u0646 \u062a\u0631\u062a\u06cc\u0628 \u06a9\u062f \u0642\u0627\u0644\u0628 \u062a\u0645\u06cc\u0632 \u0648 \u0642\u0627\u0628\u0644 \u062a\u0645\u0631\u06a9\u0632 \u0627\u0633\u062a \u0631\u0648\u06cc \u0627\u0631\u0627\u0626\u0647 \u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 \u0645\u0646\u0637\u0642 \u062f\u0631 \u06a9\u062f \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0627\u0642\u06cc \u0645\u06cc \u0645\u0627\u0646\u062f.<\/p>\n<p>\u0634\u0646\u0648\u0646\u062f\u0647 \u0631\u0648\u06cc\u062f\u0627\u062f \u06a9\u0644\u06cc\u06a9\u06cc\u060c <code>@click=\"handleSubmit\"<\/code>\u060c \u062b\u0628\u062a \u0634\u062f\u0647 \u0627\u0633\u062a \u0631\u0648\u06cc \u062f\u06a9\u0645\u0647 \u0644\u0646\u06af\u0631 \u0627\u0631\u0633\u0627\u0644\u060c \u06a9\u0647 <code>handleSubmit<\/code> \u0631\u0648\u0634.  \u0627\u06cc\u0646 \u0631\u0648\u0634 \u062a\u0627\u0628\u0639 \u0633\u0627\u062e\u062a\u06af\u06cc AJAX \u0631\u0627 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0645\u06cc \u06a9\u0646\u062f <code>saveSurveyResponse<\/code>\u060c \u06a9\u0647 \u06cc\u06a9 \u0648\u0639\u062f\u0647 \u0631\u0627 \u0628\u0631\u0645\u06cc \u06af\u0631\u062f\u0627\u0646\u062f \u0648 \u06a9\u0646\u062a\u0631\u0644 \u0631\u0627 \u0628\u0647 \u00ab\u062b\u0645\u00bb \u0645\u06cc \u0633\u067e\u0627\u0631\u062f.  &#8220;\u0633\u067e\u0633 \u0632\u0646\u062c\u06cc\u0631&#8221; \u062f\u0627\u0631\u0627\u06cc \u06cc\u06a9 \u062a\u0645\u0627\u0633 \u0627\u0633\u062a\u060c <code>.then(() -&gt; this.$router.push('\/'))<\/code>\u060c \u06a9\u0647 \u0634\u06cc \u0631\u0648\u062a\u0631 \u0645\u0624\u0644\u0641\u0647 \u0631\u0627 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u06cc\u0632\u06cc \u0634\u062f\u0647 \u0628\u0647 \u0645\u0633\u06cc\u0631\u06cc\u0627\u0628 \u0628\u0631\u0645\u06cc \u06af\u0631\u062f\u0627\u0646\u062f root \u0645\u0633\u06cc\u0631 \u0646\u0645\u0627\u06cc\u0634 <code>Home<\/code> \u062c\u0632\u0621.<\/p>\n<p>\u062f\u0631 <code>api\/index.js<\/code>\u060c \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 <code>saveSurveyResponse<\/code> \u062a\u0627\u0628\u0639 \u062f\u0631 \u067e\u0627\u06cc\u06cc\u0646 \u0641\u0627\u06cc\u0644  \u0627\u06cc\u0646 \u062a\u0627\u0628\u0639 \u06cc\u06a9 \u0634\u06cc \u067e\u0627\u0633\u062e \u0646\u0638\u0631\u0633\u0646\u062c\u06cc \u0631\u0627 \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0628\u0647 \u0633\u0627\u062f\u06af\u06cc &#8220;\u0630\u062e\u06cc\u0631\u0647 \u067e\u0627\u0633\u062e \u0646\u0638\u0631\u0633\u0646\u062c\u06cc&#8230;&#8221; \u0631\u0627 \u062b\u0628\u062a \u0645\u06cc \u06a9\u0646\u062f. \u0631\u0648\u06cc \u0631\u0627 console \u062a\u0627 \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u062f\u0631 \u0622\u06cc\u0646\u062f\u0647 \u0642\u0633\u0645\u062a \u062c\u0644\u0648\u06cc\u06cc \u0631\u0627 \u0628\u0647 REST API \u0645\u062a\u0635\u0644 \u06a9\u0646\u0645.<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">saveSurveyResponse<\/span> (<span class=\"hljs-params\">surveyResponse<\/span>) <\/span>{\n  <span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-keyword\">new<\/span> <span class=\"hljs-built_in\">Promise<\/span>(<span class=\"hljs-function\">(<span class=\"hljs-params\">resolve, reject<\/span>) =&gt;<\/span> {\n    <span class=\"hljs-built_in\">setTimeout<\/span>(<span class=\"hljs-function\">() =&gt;<\/span> {\n      <span class=\"hljs-built_in\">console<\/span>.log(<span class=\"hljs-string\">\"saving survey response...\"<\/span>)\n      })\n      resolve()\n    }, <span class=\"hljs-number\">300<\/span>)\n  })\n}\n<\/code><\/pre>\n<p>\u0630\u062e\u06cc\u0631\u0647 \u0647\u0645\u0647 \u0641\u0627\u06cc\u0644 \u0647\u0627 \u0648 \u0628\u0627\u0632\u062e\u0648\u0627\u0646\u06cc \u0645\u0631\u0648\u0631\u06af\u0631 \u0628\u0627 URL <a rel=\"nofollow noopener\" target=\"_blank\" href=\"\/#\/surveys\/2\">localhost:8080:\/#\/surveys\/2<\/a> \u0645\u0646 \u0622\u0646\u0686\u0647 \u062f\u0631 \u0632\u06cc\u0631 \u0627\u0633\u062a \u0631\u0627 \u0645\u06cc \u0628\u06cc\u0646\u0645.  \u062a\u0648\u0635\u06cc\u0647 \u0645\u06cc \u06a9\u0646\u0645 \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f \u0648 \u0645\u0637\u0645\u0626\u0646 \u0634\u0648\u06cc\u062f \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0647 \u0637\u0648\u0631 \u0645\u0646\u0637\u0642\u06cc \u062c\u0631\u06cc\u0627\u0646 \u06a9\u0646\u062a\u0631\u0644 \u0631\u0627 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u0622\u0646 \u0631\u062f\u06cc\u0627\u0628\u06cc \u06a9\u0646\u06cc\u062f <code>Survey<\/code> \u062c\u0632\u0621.<\/p>\n<p><img decoding=\"async\" class=\"img-responsive\" src=\"https:\/\/rasanegar.com\/blog\/wp-content\/uploads\/2024\/01\/1706322202_733_single-page-apps-vue-and-flask-navigating-vue-router-8.png\" alt=\"\u0633\u0648\u0627\u0644\u0627\u062a \u0646\u0638\u0631\u0633\u0646\u062c\u06cc \u0642\u0627\u0628\u0644 \u067e\u06cc\u0645\u0627\u06cc\u0634\" title=\"\"><\/p>\n<p><em>\u06a9\u0646\u0627\u0631 3 &#8211; \u0645\u0633\u06cc\u0631\u06cc\u0627\u0628\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u06cc<\/em><\/p>\n<p>\u0645\u0634\u0627\u0628\u0647 \u0642\u0628\u0644\u060c \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u0645 \u0686\u0646\u062f \u0686\u06cc\u0632 \u0631\u0627 \u06a9\u0647 \u0628\u0627 \u06cc\u06a9\u06cc \u0627\u0632 \u0646\u0645\u0648\u0646\u0647\u200c\u0647\u0627\u06cc \u0627\u0633\u0628\u0627\u0628\u200c\u0628\u0627\u0632\u06cc \u0642\u0628\u0644\u06cc \u0645\u0648\u0631\u062f \u0628\u062d\u062b \u0642\u0631\u0627\u0631 \u06af\u0631\u0641\u062a\u060c \u0646\u0634\u0627\u0646 \u062f\u0647\u0645.  \u062f\u0631 \u0632\u06cc\u0631 \u0645\u062b\u0627\u0644 \u0646\u0627\u0648\u0628\u0631\u06cc \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0627\u062f\u0647 \u0627\u0645 \u06a9\u0647 Scooby \u06cc\u0627 Shaggy \u0631\u0627 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u062f\u06cc\u06af\u0631 \u0627\u0632 <code>&lt;router-link&gt;<\/code> \u062c\u0632\u0621.<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-comment\">&lt;!-- index.html --&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/unpkg.com\/vue\/dist\/vue.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/unpkg.com\/vue-router\/dist\/vue-router.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"app\"<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> @<span class=\"hljs-attr\">click<\/span>=<span class=\"hljs-string\">\"toScooby\"<\/span>&gt;<\/span>Scooby<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> @<span class=\"hljs-attr\">click<\/span>=<span class=\"hljs-string\">\"toShaggy\"<\/span>&gt;<\/span>Shaggy<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">router-view<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">router-view<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n<span class=\"hljs-keyword\">const<\/span> Scooby = {\n    <span class=\"hljs-attr\">template<\/span>: <span class=\"hljs-string\">`\n    &lt;div&gt;\n      &lt;h4&gt;Scooby&lt;\/h4&gt;\n      &lt;p&gt;\n        &lt;img src=\"https:\/\/www.wbkidsgo.com\/Portals\/4\/Images\/Content\/Characters\/Scooby\/characterArt-scooby-SD.png\" alt=\"scooby\"\/&gt;\n      &lt;\/p&gt;\n    &lt;\/div&gt;`<\/span>\n}\n\n<span class=\"hljs-keyword\">const<\/span> Shaggy = {\n    <span class=\"hljs-attr\">template<\/span>: <span class=\"hljs-string\">`\n    &lt;div class=\"character\"&gt;\n      &lt;h4&gt;Shaggy&lt;\/h4&gt;\n      &lt;p&gt;\n        &lt;img src=\"https:\/\/upload.wikimedia.org\/wikipedia\/en\/thumb\/8\/87\/ShaggyRogers.png\/150px-ShaggyRogers.png\" alt=\"shaggy\"\/&gt;\n      &lt;\/p&gt;\n    &lt;\/div&gt;`<\/span>\n}\n\n<span class=\"hljs-keyword\">const<\/span> router = <span class=\"hljs-keyword\">new<\/span> vue-router({\n  <span class=\"hljs-attr\">routes<\/span>: (\n    { <span class=\"hljs-attr\">path<\/span>: <span class=\"hljs-string\">'\/characters\/scooby'<\/span>, <span class=\"hljs-attr\">component<\/span>: Scooby },\n    { <span class=\"hljs-attr\">path<\/span>: <span class=\"hljs-string\">'\/characters\/shaggy'<\/span>, <span class=\"hljs-attr\">component<\/span>: Shaggy }\n  )\n})\n\n<span class=\"hljs-keyword\">const<\/span> app = <span class=\"hljs-keyword\">new<\/span> Vue({\n  <span class=\"hljs-attr\">router<\/span>: router,\n  <span class=\"hljs-attr\">methods<\/span>: {\n    <span class=\"hljs-function\"><span class=\"hljs-title\">toScooby<\/span>(<span class=\"hljs-params\"><\/span>)<\/span> { <span class=\"hljs-built_in\">this<\/span>.$router.push(<span class=\"hljs-string\">'\/characters\/scooby'<\/span>) },\n    <span class=\"hljs-function\"><span class=\"hljs-title\">toShaggy<\/span>(<span class=\"hljs-params\"><\/span>)<\/span> { <span class=\"hljs-built_in\">this<\/span>.$router.push(<span class=\"hljs-string\">'\/characters\/shaggy'<\/span>) }\n  }\n}).$mount(<span class=\"hljs-string\">'#app'<\/span>)\n\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<\/code><\/pre>\n<p>\u0645\u062b\u0627\u0644 \u062f\u0642\u06cc\u0642\u0627\u064b \u0628\u0647 \u0647\u0645\u0627\u0646 \u0631\u0648\u0634 \u0642\u0628\u0644\u06cc \u0639\u0645\u0644 \u0645\u06cc \u06a9\u0646\u062f\u060c \u0627\u0645\u0627 \u0627\u06a9\u0646\u0648\u0646 \u0645\u0633\u06cc\u0631\u06cc\u0627\u0628\u06cc \u0627\u0632 \u0637\u0631\u06cc\u0642 \u062a\u0631\u06a9\u06cc\u0628\u06cc \u0627\u0632 \u0634\u0646\u0648\u0646\u062f\u06af\u0627\u0646 \u0631\u0648\u06cc\u062f\u0627\u062f \u06a9\u0644\u06cc\u06a9\u060c \u0631\u0648\u0634 \u0647\u0627\u06cc Vue \u0648 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u062f\u0633\u062a\u06cc \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u0634\u0648\u062f. <code>this.$router.push('\/path')<\/code>.  \u0627\u06cc\u0646 \u062f\u0631 \u0648\u0627\u0642\u0639 \u0686\u06cc\u0632\u06cc \u0627\u0633\u062a <code>&lt;router-link&gt;<\/code> \u067e\u0634\u062a \u0635\u062d\u0646\u0647 \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 <code>to=\"\/path\"<\/code> \u0627\u0631\u0632\u0634.  \u0645\u0646 \u0634\u0645\u0627 \u0631\u0627 \u062a\u0634\u0648\u06cc\u0642 \u0645\u06cc \u06a9\u0646\u0645 \u06a9\u0647 \u0628\u0627 \u0627\u06cc\u0646 \u0645\u062b\u0627\u0644 \u0632\u0646\u062f\u0647 \u0628\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/jsfiddle.net\/amcquistan\/7krr0m91\/\">\u0627\u06cc\u0646\u062c\u0627<\/a>.<\/p>\n<h2 id=\"addingrouterlinkstothehomecomponent\"><span class=\"ez-toc-section\" id=\"%d8%a7%d9%81%d8%b2%d9%88%d8%af%d9%86_%d9%be%db%8c%d9%88%d9%86%d8%af%d9%87%d8%a7%db%8c_%d8%b1%d9%88%d8%aa%d8%b1_%d8%a8%d9%87_%da%a9%d8%a7%d9%85%d9%be%d9%88%d9%86%d9%86%d8%aa_home\"><\/span>\u0627\u0641\u0632\u0648\u062f\u0646 \u067e\u06cc\u0648\u0646\u062f\u0647\u0627\u06cc \u0631\u0648\u062a\u0631 \u0628\u0647 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a Home<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0622\u062e\u0631\u06cc\u0646 \u06a9\u0627\u0631\u06cc \u06a9\u0647 \u0628\u0627\u06cc\u062f \u0628\u0627 <code>Survey<\/code> \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u062a\u0648\u0627\u0646\u0627\u06cc\u06cc \u067e\u06cc\u0645\u0627\u06cc\u0634 \u0628\u0647 \u0646\u0638\u0631\u0633\u0646\u062c\u06cc \u0631\u0627 \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc \u06a9\u0646\u062f <code>Home<\/code> \u062c\u0632\u0621.  \u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u0642\u0628\u0644\u0627\u064b \u0628\u0627 \u0645\u062b\u0627\u0644 Scooby \u0648 Shaggy \u0646\u0634\u0627\u0646 \u062f\u0627\u062f\u0647 \u0634\u062f\u060c vue-router \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0631\u0627 \u0628\u0633\u06cc\u0627\u0631 \u0622\u0633\u0627\u0646 \u0645\u06cc \u06a9\u0646\u062f. <code>&lt;router-link&gt;<\/code>.<\/p>\n<p>\u0628\u0631\u06af\u0634\u062a \u062f\u0631 <code>Home<\/code> \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0627\u0635\u0644\u0627\u062d \u0632\u06cc\u0631 \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u062f\u0647\u062f:<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"card\"<\/span> <span class=\"hljs-attr\">v-for<\/span>=<span class=\"hljs-string\">\"survey in surveys\"<\/span> <span class=\"hljs-attr\">v-bind:key<\/span>=<span class=\"hljs-string\">\"survey.id\"<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"card-content\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"title\"<\/span>&gt;<\/span>{{ survey.name}}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">'subtitle'<\/span>&gt;<\/span>{{survey.created_at.toDateString()}}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"card-foooter\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">router-link<\/span> <span class=\"hljs-attr\">:to<\/span>=<span class=\"hljs-string\">\"`surveys\/${survey.id}`\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"card-footer-item\"<\/span>&gt;<\/span>Take Survey<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">router-link<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/code><\/pre>\n<p>\u0627\u0644\u0641 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0645 <code>&lt;router-link&gt;<\/code> \u062c\u0632\u0621 \u062f\u0627\u062e\u0644 a <code>bulma<\/code> \u067e\u0627\u0648\u0631\u0642\u06cc \u06a9\u0627\u0631\u062a \u0648 \u0628\u0647 \u0635\u0648\u0631\u062a \u067e\u0648\u06cc\u0627 \u0645\u0633\u06cc\u0631 \u0647\u0631 \u0646\u0638\u0631\u0633\u0646\u062c\u06cc \u0631\u0627 \u0633\u0627\u062e\u062a.  \u0627\u06cc\u0646 \u0628\u0627 \u0645\u0633\u06cc\u0631\u0647\u0627\u06cc \u0631\u0634\u062a\u0647 \u062a\u062d\u062a \u0627\u0644\u0644\u0641\u0638\u06cc \u06a9\u0647 \u062f\u0631 \u0645\u062b\u0627\u0644 \u0642\u0628\u0644\u06cc \u0627\u0631\u0627\u0626\u0647 \u06a9\u0631\u062f\u0645 \u0645\u062a\u0641\u0627\u0648\u062a \u0627\u0633\u062a.  \u0628\u0631\u0627\u06cc \u062a\u0648\u0644\u06cc\u062f \u067e\u0648\u06cc\u0627 \u0645\u0633\u06cc\u0631\u0647\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0631\u0634\u062a\u0647\u200c\u0647\u0627\u06cc \u0642\u0627\u0644\u0628 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0648 \u0634\u0646\u0627\u0633\u0647\u200c\u0647\u0627\u06cc \u0646\u0638\u0631\u0633\u0646\u062c\u06cc \u06a9\u0647 \u0631\u0648\u06cc \u0622\u0646 \u062a\u06a9\u0631\u0627\u0631 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f\u060c \u067e\u06cc\u0634\u0648\u0646\u062f \u0631\u0627 \u0648\u0627\u0631\u062f \u0645\u06cc\u200c\u06a9\u0646\u0645. <code>to<\/code> \u067e\u0627\u0631\u0627\u0645\u062a\u0631 \u0628\u0627 \u062f\u0648 \u0646\u0642\u0637\u0647 (&#8220;:&#8221;)\u060c \u06a9\u0647 \u0645\u062e\u0641\u0641 \u0639\u0628\u0627\u0631\u062a \u0627\u0633\u062a <code>v-bind<\/code> \u0628\u062e\u0634\u0646\u0627\u0645\u0647<\/p>\n<p>\u0645\u0646 \u0647\u0645\u0647 \u0641\u0627\u06cc\u0644 \u0647\u0627 \u0631\u0627 \u0630\u062e\u06cc\u0631\u0647 \u0645\u06cc \u06a9\u0646\u0645 \u0648 \u0628\u0627\u0644\u0627 \u0645\u06cc \u06a9\u0634\u0645 root \u0645\u0633\u06cc\u0631 URL\u060c localhost:8080\u060c \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631 \u0645\u0646 \u062a\u0627 \u0645\u0637\u0645\u0626\u0646 \u0634\u0648\u0645 \u06a9\u0647 \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u062f.  \u0634\u0645\u0627 \u0628\u0627\u06cc\u062f \u0628\u062a\u0648\u0627\u0646\u06cc\u062f \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f \u0631\u0648\u06cc \u067e\u06cc\u0648\u0646\u062f \u0647\u0631 \u0646\u0638\u0631\u0633\u0646\u062c\u06cc &#8220;\u0628\u0631\u06af\u0632\u0627\u0631\u06cc \u0646\u0638\u0631\u0633\u0646\u062c\u06cc&#8221; \u0648 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0634\u0648\u062f <code>Survey<\/code> \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0645\u0624\u0644\u0641\u0647<\/p>\n<p>\u0628\u0631\u0627\u06cc \u062a\u06a9\u0645\u06cc\u0644 \u062a\u062c\u0631\u0628\u0647\u060c \u06cc\u06a9 \u0646\u0648\u0627\u0631 \u0646\u0627\u0648\u0628\u0631\u06cc \u0633\u0627\u062f\u0647 \u0628\u0627 \u0632\u0628\u0627\u0646\u0647 &#8220;\u0635\u0641\u062d\u0647 \u0627\u0635\u0644\u06cc&#8221; \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0622\u0646 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u06a9\u0646\u0645 <code>&lt;router-link&gt;<\/code> \u0648 \u0627\u0644\u0641 <code>to<\/code> \u067e\u0627\u0631\u0627\u0645\u062a\u0631 \u0627\u0634\u0627\u0631\u0647 \u0628\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 root \u0645\u0633\u06cc\u0631 \u062f\u0631\u0648\u0646 \u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u062c\u062f\u06cc\u062f \u0628\u0647 \u0646\u0627\u0645 <code>Header.vue<\/code> \u062f\u0631 \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">nav<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"navbar is-light\"<\/span> <span class=\"hljs-attr\">role<\/span>=<span class=\"hljs-string\">\"navigation\"<\/span> <span class=\"hljs-attr\">aria-label<\/span>=<span class=\"hljs-string\">\"main navigation\"<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"navbar-menu\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"navbar-start\"<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">router-link<\/span> <span class=\"hljs-attr\">to<\/span>=<span class=\"hljs-string\">\"\/\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"navbar-item\"<\/span>&gt;<\/span>\n        Home\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">router-link<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">nav<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">style<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">style<\/span>&gt;<\/span>\n<\/code><\/pre>\n<p>\u0628\u0631\u0627\u06cc \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u0627\u0632 \u0627\u06cc\u0646\u06a9\u0647 \u062f\u0631 \u0647\u0631 \u06cc\u06a9 \u06af\u0646\u062c\u0627\u0646\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a page \u0627\u0632 \u0628\u0631\u0646\u0627\u0645\u0647 \u0645\u0646 \u0622\u0646 \u0631\u0627 \u062f\u0631 <code>App.vue<\/code> \u062c\u0632\u0621.  \u0628\u0631\u0627\u06cc \u0627\u0646\u062c\u0627\u0645 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0627\u0628\u062a\u062f\u0627 \u0645\u0646 import \u0631\u0627 <code>Header<\/code> \u062c\u0632\u0621 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 <code>AppHeader<\/code> \u062f\u0631 <code>script<\/code> \u0633\u067e\u0633 \u0628\u0627 \u0627\u0641\u0632\u0648\u062f\u0646 \u06cc\u06a9 \u0648\u06cc\u0698\u06af\u06cc \u0628\u0647 \u0646\u0627\u0645 \u0622\u0646 \u0631\u0627 \u062b\u0628\u062a \u06a9\u0646\u06cc\u062f <code>components<\/code> \u0631\u0648\u06cc  \u0634\u0626 Vue \u062c\u0632\u0621 App \u0648 \u0622\u0646 \u0631\u0627 \u0628\u0631\u0627\u0628\u0631 \u0628\u0627 \u06cc\u06a9 \u0634\u06cc \u062d\u0627\u0648\u06cc <code>AppHeader<\/code> \u062c\u0632\u0621.<\/p>\n<p>\u0633\u067e\u0633 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0631\u0627 \u062f\u0631 \u0642\u0627\u0644\u0628 \u0642\u0631\u0627\u0631 \u0645\u06cc \u062f\u0647\u0645 <code>&lt;app-header&gt;<\/code> \u062f\u0631\u0633\u062a \u0628\u0627\u0644\u0627\u06cc <code>&lt;router-view&gt;<\/code> \u062c\u0632\u0621.  \u0647\u0646\u06af\u0627\u0645 \u0646\u0627\u0645\u06af\u0630\u0627\u0631\u06cc \u0627\u062c\u0632\u0627\u060c \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0622\u0646 \u0631\u0627\u06cc\u062c \u0627\u0633\u062a <a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/wiki.c2.com\/?PascalCase\">\u06a9\u06cc\u0633 \u067e\u0627\u0633\u06a9\u0627\u0644<\/a> \u0628\u0647 \u0647\u0645 \u067e\u06cc\u0648\u0633\u062a\u0646 \u06a9\u0644\u0645\u0627\u062a\u06cc \u06a9\u0647 \u0622\u0646 \u0631\u0627 \u062a\u0648\u0635\u06cc\u0641 \u0645\u06cc \u06a9\u0646\u0646\u062f\u060c \u062c\u0627\u06cc\u06cc \u06a9\u0647 \u062d\u0631\u0641 \u0627\u0648\u0644 \u0647\u0631 \u06a9\u0644\u0645\u0647 \u0628\u0632\u0631\u06af \u0645\u06cc \u0634\u0648\u062f.  \u0633\u067e\u0633 \u0622\u0646 \u0631\u0627 \u0628\u0627 \u062d\u0631\u0648\u0641 \u06a9\u0648\u0686\u06a9 \u0628\u0627 \u062e\u0637 \u0641\u0627\u0635\u0644\u0647 \u0628\u06cc\u0646 \u0647\u0631 \u06a9\u0644\u0645\u0647 \u06a9\u0647 \u0628\u0627 \u06cc\u06a9 \u062d\u0631\u0641 \u0628\u0632\u0631\u06af \u0634\u0631\u0648\u0639 \u0645\u06cc \u0634\u0648\u062f \u062f\u0631 \u0642\u0627\u0644\u0628 \u0642\u0631\u0627\u0631 \u0645\u06cc \u062f\u0647\u0645.<\/p>\n<p>\u0630\u062e\u06cc\u0631\u0647 \u0641\u0627\u06cc\u0644 \u0647\u0627 \u0648 \u0631\u0641\u0631\u0634 \u06a9\u0631\u062f\u0646 \u0645\u0631\u0648\u0631\u06af\u0631 \u0645\u0646 \u0627\u06a9\u0646\u0648\u0646 \u0645\u06cc \u0628\u06cc\u0646\u0645 <code>Header<\/code> \u062c\u0632\u0621 \u062d\u0627\u0648\u06cc \u0646\u0648\u0627\u0631 \u0646\u0627\u0648\u0628\u0631\u06cc \u062f\u0631 \u0647\u0631 \u06cc\u06a9 page \u0627\u0632 \u0628\u0631\u0646\u0627\u0645\u0647<\/p>\n<p><img decoding=\"async\" class=\"img-responsive\" src=\"https:\/\/rasanegar.com\/blog\/wp-content\/uploads\/2024\/01\/single-page-apps-vue-and-flask-navigating-vue-router-9.png\" alt=\"\u0647\u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647\" title=\"\"><\/p>\n<h2 id=\"resources\"><span class=\"ez-toc-section\" id=\"%d9%85%d9%86%d8%a7%d8%a8%d8%b9\"><\/span>\u0645\u0646\u0627\u0628\u0639<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0622\u06cc\u0627 \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u06cc\u062f \u062f\u0631\u0628\u0627\u0631\u0647 Vue.js \u0648 \u0633\u0627\u062e\u062a \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0647\u0627\u06cc \u0648\u0628 \u062c\u0644\u0648\u06cc\u06cc \u0628\u06cc\u0634\u062a\u0631 \u0628\u062f\u0627\u0646\u06cc\u062f\u061f  \u0633\u0639\u06cc \u06a9\u0646\u06cc\u062f \u0628\u0631\u062e\u06cc \u0627\u0632 \u0645\u0646\u0627\u0628\u0639 \u0632\u06cc\u0631 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0628\u0631\u0631\u0633\u06cc \u0639\u0645\u06cc\u0642\u200c\u062a\u0631 \u062f\u0631 \u0627\u06cc\u0646 \u0686\u0627\u0631\u0686\u0648\u0628 \u0638\u0627\u0647\u0631\u06cc \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u062f:<\/p>\n<ul>\n<li><a class=\"udemy-link\" rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/stackabu.se\/vue-js-2-complete-guide\">Vue.js 2 &#8211; \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u06a9\u0627\u0645\u0644<\/a><\/li>\n<li><a class=\"udemy-link\" rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/stackabu.se\/ultimate-vue-js-2-developers-course\">\u062f\u0648\u0631\u0647 \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646 Ultimate Vue JS 2<\/a><\/li>\n<\/ul>\n<h2 id=\"conclusion\"><span class=\"ez-toc-section\" id=\"%d9%86%d8%aa%db%8c%d8%ac%d9%87\"><\/span>\u0646\u062a\u06cc\u062c\u0647<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0627\u06af\u0631 \u0647\u0646\u0648\u0632 \u062f\u0631 \u062d\u0627\u0644 \u062e\u0648\u0627\u0646\u062f\u0646 \u0627\u06cc\u0646 \u0645\u0637\u0644\u0628 \u0647\u0633\u062a\u06cc\u062f\u060c \u0645\u0642\u062f\u0627\u0631 \u0628\u0633\u06cc\u0627\u0631 \u062e\u0648\u0628\u06cc \u0627\u0632 Vue \u062e\u0648\u0628\u06cc \u0645\u0635\u0631\u0641 \u06a9\u0631\u062f\u0647 \u0627\u06cc\u062f.  \u0645\u0627 \u0645\u0637\u0645\u0626\u0646\u0627\u064b \u0645\u0637\u0627\u0644\u0628 \u0632\u06cc\u0627\u062f\u06cc \u0631\u0627 \u062f\u0631 \u0627\u06cc\u0646 \u067e\u0633\u062a \u067e\u0648\u0634\u0634 \u062f\u0627\u062f\u06cc\u0645 \u0648 \u0627\u06af\u0631 \u0634\u0645\u0627 \u062a\u0627\u0632\u0647 \u0648\u0627\u0631\u062f Vue \u06cc\u0627 SPA\u0647\u0627\u06cc \u062a\u06a9 \u0641\u0627\u06cc\u0644\u06cc \u0647\u0633\u062a\u06cc\u062f\u060c \u0627\u062d\u062a\u0645\u0627\u0644\u0627\u064b \u0627\u0631\u0632\u0634 \u06cc\u06a9 \u0628\u0627\u0631 \u062e\u0648\u0627\u0646\u062f\u0646 \u0648 \u06cc\u06a9 \u0633\u0641\u0631 \u0628\u0647 \u0628\u062e\u0634 \u0639\u0627\u0644\u06cc \u0631\u0627 \u062f\u0627\u0631\u062f. <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/vuejs.org\/v2\/guide\/\">\u0627\u0633\u0646\u0627\u062f Vue<\/a> \u0628\u0631\u0627\u06cc \u06cc\u06a9 \u0634\u06cc\u0631\u062c\u0647 \u0639\u0645\u06cc\u0642 \u062a\u0631<\/p>\n<p>\u0645\u062b\u0644 \u0647\u0645\u06cc\u0634\u0647\u060c \u0645\u0645\u0646\u0648\u0646 \u06a9\u0647 \u062e\u0648\u0627\u0646\u062f\u06cc\u062f \u0648 \u0627\u0632 \u0646\u0638\u0631 \u062f\u0627\u062f\u0646 \u06cc\u0627 \u0627\u0646\u062a\u0642\u0627\u062f \u062f\u0631 \u0632\u06cc\u0631 \u062e\u062c\u0627\u0644\u062a \u0646\u06a9\u0634\u06cc\u062f.<\/p>\n<\/div>\n<p><br \/>\n<br \/>\u0645\u0646\u062a\u0634\u0631 \u0634\u062f\u0647 \u062f\u0631 1403-01-27 05:53:03<br \/>\n<\/p>\n\n\n<div class=\"kk-star-ratings kksr-auto kksr-align-center kksr-valign-bottom\"\n    data-payload='{&quot;align&quot;:&quot;center&quot;,&quot;id&quot;:&quot;16573&quot;,&quot;slug&quot;:&quot;default&quot;,&quot;valign&quot;:&quot;bottom&quot;,&quot;ignore&quot;:&quot;&quot;,&quot;reference&quot;:&quot;auto&quot;,&quot;class&quot;:&quot;&quot;,&quot;count&quot;:&quot;0&quot;,&quot;legendonly&quot;:&quot;&quot;,&quot;readonly&quot;:&quot;&quot;,&quot;score&quot;:&quot;0&quot;,&quot;starsonly&quot;:&quot;&quot;,&quot;best&quot;:&quot;5&quot;,&quot;gap&quot;:&quot;5&quot;,&quot;greet&quot;:&quot;\u0627\u0645\u062a\u06cc\u0627\u0632 \u0634\u0645\u0627 \u0628\u0647 \u0627\u06cc\u0646 \u0645\u0637\u0644\u0628&quot;,&quot;legend&quot;:&quot;0\\\/5 (0 \u0631\u0627\u06cc)&quot;,&quot;size&quot;:&quot;30&quot;,&quot;title&quot;:&quot;\u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u062a\u06a9 \u0635\u0641\u062d\u0647 \u0627\u06cc \u0628\u0627 Vue.js \u0648 Flask: \u067e\u06cc\u0645\u0627\u06cc\u0634 \u0631\u0648\u062a\u0631 Vue \u0628\u0647 \u067e\u0633\u062a \u062f\u0648\u0645 \u062e\u0648\u0634 \u0622\u0645\u062f\u06cc\u062f \u0631\u0648\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Vue.js \u0648 Flask \u0628\u0631\u0627\u06cc \u062a\u0648\u0633\u0639\u0647 \u0648\u0628 \u062a\u0645\u0627\u0645 \u067e\u0634\u062a\u0647.  \u0645\u0648\u0636\u0648\u0639 \u0627\u0635\u0644\u06cc \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f \u0631\u0648\u06cc Vue Router\u060c \u0627\u0645\u0627 \u0645\u0646 \u062f\u0633\u062a\u0648\u0631\u0627\u0644\u0639\u0645\u0644 v-model \u0648 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0631\u0648\u0634\u200c\u0647\u0627\u06cc Vue \u0648 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc \u0645\u062d\u0627\u0633\u0628\u0647\u200c\u0634\u062f\u0647 \u0631\u0627 \u0646\u06cc\u0632 \u067e\u0648\u0634\u0634 \u062e\u0648\u0627\u0647\u0645 \u062f\u0627\u062f.  \u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u06af\u0641\u062a\u0647 \u0634\u062f\u060c \u0686\u06cc\u0632\u06cc \u06a9\u0627\u0641\u0626\u06cc\u0646 \u062f\u0627\u0631 \u0628\u06af\u06cc\u0631\u06cc\u062f \u0648 \u0645\u0635\u0631\u0641 \u06a9\u0646\u06cc\u062f ...&quot;,&quot;width&quot;:&quot;0&quot;,&quot;_legend&quot;:&quot;{score}\\\/{best} ({count} \u0631\u0627\u06cc)&quot;,&quot;font_factor&quot;:&quot;1.25&quot;}'>\n            \n<div class=\"kksr-stars\">\n    \n<div class=\"kksr-stars-inactive\">\n            <div class=\"kksr-star\" data-star=\"1\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"2\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"3\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"4\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"5\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n    <\/div>\n    \n<div class=\"kksr-stars-active\" style=\"width: 0px;\">\n            <div class=\"kksr-star\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n    <\/div>\n<\/div>\n                \n\n<div class=\"kksr-legend\" style=\"font-size: 24px;\">\n            <span class=\"kksr-muted\">\u0627\u0645\u062a\u06cc\u0627\u0632 \u0634\u0645\u0627 \u0628\u0647 \u0627\u06cc\u0646 \u0645\u0637\u0644\u0628<\/span>\n    <\/div>\n    <\/div>\n","protected":false},"excerpt":{"rendered":"<p><span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">\u0632\u0645\u0627\u0646 \u0644\u0627\u0632\u0645 \u0628\u0631\u0627\u06cc \u0645\u0637\u0627\u0644\u0639\u0647: <\/span> <span class=\"rt-time\"> 13<\/span> <span class=\"rt-label rt-postfix\">\u062f\u0642\u06cc\u0642\u0647<\/span><\/span>\u067e\u06cc\u0645\u0627\u06cc\u0634 \u0631\u0648\u062a\u0631 Vue \u0628\u0647 \u067e\u0633\u062a \u062f\u0648\u0645 \u062e\u0648\u0634 \u0622\u0645\u062f\u06cc\u062f \u0631\u0648\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Vue.js \u0648 Flask \u0628\u0631\u0627\u06cc \u062a\u0648\u0633\u0639\u0647 \u0648\u0628 \u062a\u0645\u0627\u0645 \u067e\u0634\u062a\u0647. \u0645\u0648\u0636\u0648\u0639 \u0627\u0635\u0644\u06cc \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f \u0631\u0648\u06cc Vue Router\u060c \u0627\u0645\u0627 \u0645\u0646 \u062f\u0633\u062a\u0648\u0631\u0627\u0644\u0639\u0645\u0644 v-model \u0648 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0631\u0648\u0634\u200c\u0647\u0627\u06cc Vue \u0648 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc \u0645\u062d\u0627\u0633\u0628\u0647\u200c\u0634\u062f\u0647 \u0631\u0627 \u0646\u06cc\u0632 \u067e\u0648\u0634\u0634 \u062e\u0648\u0627\u0647\u0645 \u062f\u0627\u062f. \u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u06af\u0641\u062a\u0647 \u0634\u062f\u060c \u06cc\u06a9 \u0686\u06cc\u0632 \u06a9\u0627\u0641\u0626\u06cc\u0646 \u062f\u0627\u0631 \u0628\u06af\u06cc\u0631\u06cc\u062f \u0648 [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1772,620],"tags":[3292,2054,1843,3642,4611,3294,4609,2508,1964,1938,2341,1776,1786,2271,1817,2051,1789,1779,1814,1909,1841,3992,1807,2276,2917,1766,4055,2720,3561,2843,1881,1103,1962,2275,4613,4608,3467,4615,2750,4610,4607,1803,4334,2781,2667,1859,2962,2376,4614,1806,1795,3140,4612,3667,2799,2321,4603,3341,1785,3322,3526,2829,3811],"class_list":["post-16573","post","type-post","status-publish","format-standard","hentry","category-javascript","category-programming","tag-vue","tag-flask","tag-nodejs-hosting","tag-router","tag-vmodel","tag-vue-js","tag-4609","tag--javascript","tag----frontend","tag-1938","tag-2341","tag-1776","tag-1786","tag-2271","tag-1817","tag-2051","tag-1789","tag-1779","tag-1814","tag-1909","tag-1841","tag-3992","tag-1807","tag-2276","tag-2917","tag-1766","tag-4055","tag-2720","tag-3561","tag-2843","tag-1881","tag-1103","tag-1962","tag-2275","tag-4613","tag-4608","tag-3467","tag-4615","tag-2750","tag-4610","tag-4607","tag-1803","tag-4334","tag-2781","tag-2667","tag---nodejs","tag-2962","tag-2376","tag-4614","tag-1806","tag-1795","tag-3140","tag-4612","tag-3667","tag-2799","tag-2321","tag-4603","tag-3341","tag-1785","tag-3322","tag-3526","tag-2829","tag-3811"],"acf":[],"_links":{"self":[{"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/posts\/16573","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/comments?post=16573"}],"version-history":[{"count":0,"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/posts\/16573\/revisions"}],"wp:attachment":[{"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/media?parent=16573"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/categories?post=16573"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/tags?post=16573"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}