Routing

Official Documentation: https://router.vuejs.org/en/essentials/getting-started.html

https://github.com/oanstein/VueJS-Complete-Guide-Code/tree/master/16_routing/routes

---

How to create routes

/src/main.js

import Vue from 'vue'
import VueRouter from 'vue-router' // 1.1 Import router
import App from './App.vue'
import { routes } from './routes' // 2.2 Import "const routes" from routes.js

Vue.use(VueRouter);  // 1.2 Set up router, then create routes.js and export routes

const router = new VueRouter({ // 2.3 Implement routes
  routes,
  mode: 'history',
  scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition;
    }
    if (to.hash) {
      return { selector: to.hash };
    }
    return {x: 0, y: 0};
  }
});

router.beforeEach((to, from, next) => {
  console.log('global beforeEach');
  next();
});

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

/src/routes.js

import Home from './components/Home.vue';
import Header from './components/Header.vue';

const User = resolve => {
  require.ensure(['./components/user/User.vue'], () => {
    resolve(require('./components/user/User.vue'));
  }, 'user');
}
const UserStart = resolve => {
  require.ensure(['./components/user/UserStart.vue'], () => {
    resolve(require('./components/user/UserStart.vue'));
  }, 'user');
}
const UserEdit = resolve => {
  require.ensure(['./components/user/UserEdit.vue'], () => {
    resolve(require('./components/user/UserEdit.vue'));
  }, 'user');
}
const UserDetail = resolve => {
  require.ensure(['./components/user/UserDetail.vue'], () => {
    resolve(require('./components/user/UserDetail.vue'));
  }, 'user');
}

export const routes = [
  // 2.1 Create route(s): Each needs a *path* (appended in URL); then set *component* (don't forget import)
  { path: '', name: 'home', components: {
    default: Home,
    'header-top': Header
  } },

  { path: '/user', components: {
      default: User,
      'header-bottom': Header
    }, children: [
    { path: '', component: UserStart },
    { path: ':id', component: UserDetail, beforeEnter: (to, from, next) => {
      console.log('inside route setup');
      next();
    } },
    { path: ':id/edit', component: UserEdit, name: 'userEdit' },
  ] },

  { path: '/redirect-me', redirect: { name: 'home' } },

  { path: '*', redirect: '/'}
];

/src/App.vue

<template>
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
                <h1>Routing</h1>
                <hr>

                <!-- 3.1 Mark place where route should be loaded (here named with "header-top") -->
                <router-view name="header-top"></router-view>
                
                <transition name="slide" mode="out-in">
                  <router-view></router-view>
                </transition>
      
                <router-view name="header-bottom"></router-view>
            </div>
        </div>
    </div>
</template>

<script>
  import Header from './components/Header.vue';

  export default {
    components: {
      appHeader: Header
    }
  }
</script>

<style>
  .slide-leave-active {
    transition: opacity 1s ease;
    opacity: 0;
    animation: slide-out 1s ease-out forwards;
  }

  .slide-leave {
    opacity: 1;
    transform: translateX(0);
  }

  .slide-enter-active {
    animation: slide-in 1s ease-out forwards;
  }

  @keyframes slide-out {
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(-30px);
    }
  }

  @keyframes slide-in {
    0% {
      transform: translateY(-30px);
    }
    100% {
      transform: translateY(0);
    }
  }
</style>

---

How to create links

/src/components/Header.vue

<template>
  <ul class="nav nav-pills">
    <router-link to="/" tag="li" active-class="active" exact><a>Home</a></router-link>
    <router-link to="/user" tag="li" active-class="active"><a>User</a></router-link>
  </ul>
</template>

---

How to link to page within a method

Official Documentation: https://router.vuejs.org/en/essentials/navigation.html

/src/components/user/User.vue

<template>
    <div>
      <h1>The User Page</h1>
      <hr>
      <button @click="navigateToHome" class="btn btn-info">Go to Home</button>
      <hr>
      <router-view></router-view>
    </div>
</template>

<script>
  export default {
    methods: {
      navigateToHome() {
        this.$router.push({ name: 'home' });
      }
    }
  }
</script>

---

vue-router 2.2: Extract Route Params via "props"

https://github.com/vuejs/vue-router/blob/dev/examples/route-props/app.js

// Other Code
const router = new VueRouter({
  mode: 'history',
  base: __dirname,
  routes: [
    { path: '/', component: Hello }, // No props, no nothing
    { path: '/hello/:name', component: Hello, props: true }, // Pass route.params to props
    { path: '/static', component: Hello, props: { name: 'world' }}, // static values
    { path: '/dynamic/:years', component: Hello, props: dynamicPropsFn } // custom logic for mapping between route and props
  ]
})
// Other Code

https://github.com/vuejs/vue-router/blob/dev/examples/route-props/Hello.vue

<template>
  <div>
    <h2 class="hello">Hello {{name}}</h2>
  </div>
</template>

<script>
export default {
  // Prop :name from $route
  props: {
    name: { 
      type: String,
      default: 'Vue!'
    }
  }
}
</script>