Implement history mode on vue-router (#355)

* Use history mode for router

* Redirect on 404

* Add .htaccess configuration

* Set base path on all builds

Author: ttpcodes

build/webpack.config.dev.js

@@ -11,6 +11,7 @@ module.exports = (env) => {
       './src/app.js'
     ],
     devServer: {
+      historyApiFallback: true,
       hot: true,
       watchOptions: {
         poll: true
@@ -54,6 +55,9 @@ module.exports = (env) => {
         }
       ]
     },
+    output: {
+      publicPath: env.APP_URL.indexOf('dev') !== -1 ? '/dev/' : '/'
+    },
     plugins: [
       new webpack.HotModuleReplacementPlugin(),
       new VueLoaderPlugin(),

deploy.sh

@@ -10,12 +10,12 @@ if [ "$1" = "prod" ]; then
   echo -n "You are about to deploy to the production site, are you sure? (y/n)? "
   read answer
   if [ "$answer" != "${answer#[Yy]}" ] ;then
-    scp -r dist/* $2@athena.dialup.mit.edu:/mit/courseroad/web_scripts/courseroad/
+    scp -r deploy/production/.htaccess dist/* $2@athena.dialup.mit.edu:/mit/courseroad/web_scripts/courseroad/
   else
     echo cancelled
   fi
 elif [ "$1" = "dev" ]; then
-    scp -r dist/* $2@athena.dialup.mit.edu:/mit/courseroad/web_scripts/courseroad/dev/
+    scp -r deploy/development/.htaccess dist/* $2@athena.dialup.mit.edu:/mit/courseroad/web_scripts/courseroad/dev/
 else
   echo "Invalid build location"
 fi

deploy/development/.htaccess

@@ -0,0 +1 @@
+ErrorDocument 404 /dev/index.html

deploy/production/.htaccess

@@ -0,0 +1 @@
+ErrorDocument 404 /index.html

src/app.js

@@ -25,11 +25,15 @@ Vue.use(VueRouter);
 Vue.use(BrowserSupportPlugin);
 
 var routes = [
-  { path: '/', component: MainPage },
-  { path: '/about', component: About }
+  { path: '/', redirect: '/road' },
+  { path: '/about', component: About },
+  { path: '/road/:road?', component: MainPage },
+  { path: '*', redirect: '/road' }
 ];
 
 var router = new VueRouter({
+  base: process.env.APP_URL.indexOf('dev') !== -1 ? '/dev/' : '/',
+  mode: 'history',
   routes
 });
 

src/pages/MainPage.vue

@@ -298,7 +298,7 @@ export default {
         this.updateFulfillment(this.$store.state.fulfillmentNeeded);
       }
       if (newRoad !== '') {
-        window.history.pushState({}, this.roads[newRoad].name, './#/#road' + newRoad);
+        this.$router.push({ path: `/road/${newRoad}` });
       }
     },
     cookiesAllowed: function (newCA) {
@@ -324,6 +324,9 @@ export default {
         }
       },
       deep: true
+    },
+    $route () {
+      this.setActiveRoad();
     }
   },
   created () {
@@ -352,10 +355,6 @@ export default {
       borders.css({ top: 0, left: scrollWidth - 1 + scrollPosition });
     });
 
-    $(window).on('hashchange', function () {
-      this.setActiveRoad();
-    }.bind(this));
-
     this.setActiveRoad();
 
     axios.get(process.env.FIREROAD_URL + `/requirements/list_reqs/`)
@@ -424,15 +423,14 @@ export default {
       }
     },
     setActiveRoad: function () {
-      const roadHash = window.location.hash;
-      if (roadHash.length && roadHash.substring(0, 7) === '#/#road') {
-        const roadRequested = roadHash.substring(7);
+      if (this.roads.hasOwnProperty(this.$route.params.road)) {
+        const roadRequested = this.$route.params.road;
         if (roadRequested in this.roads) {
-          this.$store.commit('setActiveRoad', roadHash.substring(7));
+          this.$store.commit('setActiveRoad', roadRequested);
           return true;
         }
       }
-      window.location.hash = '#/#road' + this.activeRoad;
+      this.$router.push({ path: `/road/${this.activeRoad}` });
       return false;
     },
     addRoad: function (roadName, cos = ['girs'], ss = Array.from(Array(16), () => []), overrides = {}) {