Vue.js 2

Vue-Router, Vuex, etc.

by Atinux

HTML

<script src="https://unpkg.com/vue@next/dist/vue.js"></script>
<script src="https://unpkg.com/vuex-router-sync@next/index.js"></script>
<script src="https://unpkg.com/vuex@next/dist/vuex.js"></script>
<script src="https://unpkg.com/vue-router@next/dist/vue-router.js"></script>
<script>window.exports = {};</script>
<script src="https://unpkg.com/vuex-router-sync@next/index.js"></script>
<div id="app"></div>

CSS

body {
  font-family: Verdana;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  clear: both;
  overflow: hidden;
  margin-bottom: 10px;
}
li {
  float: left;
  border: 1px #ddd solid;
}
li a {
  display: inline-block;
  background: white;
  padding: 10px;
  color: #222;
  text-decoration: none;
}
li a.router-link-active {
  background: #eee;
}
.a, .b {
  clear: left;
  height: 800px;
  padding-top: 240px;
  text-align: center;
  color: white;
  width: 400px;
  background-image: -webkit-linear-gradient(44deg, #3023AE 0%, #C86DD7 100%);
  background-image: -moz-linear-gradient(44deg, #3023AE 0%, #C86DD7 100%);
  background-image: -o-linear-gradient(44deg, #3023AE 0%, #C86DD7 100%);
  background-image: linear-gradient(134deg, #3023AE 0%, #C86DD7 100%);
}

.b {
  background-image: -webkit-linear-gradient(#B4EC51 0%, #429321 100%);
  background-image: -moz-linear-gradient(#B4EC51 0%, #429321 100%);
  background-image: -o-linear-gradient(#B4EC51 0%, #429321 100%);
  background-image: linear-gradient(#B4EC51 0%, #429321 100%);
}

JavaScript

var A = {
	template: '<div class="a">I am component A</div>',
  created: function () {
  	console.log('Component A created!');
		if (this.$route.meta.lastScroll === null) {
			this.$route.meta.lastScroll = parseInt(Math.random() * 800, 10);
    }
  }
};
var B = {
	template: '<div class="b">I am component B</div>',
  created: function () {
  	console.log('Component B created!');
    if (this.$route.meta.lastScroll === null) {
			this.$route.meta.lastScroll = parseInt(Math.random() * 800, 10);
    }
  }
};

const router = new VueRouter({
	mode: 'history',
	scrollBehavior: function (to, from, savedPosition) {
		if (savedPosition) {
    	return savedPosition;
    } else {
    	console.log(to.meta.lastScroll);
			return { x: 0, y: to.meta.lastScroll };
    }
  },
  routes: [
    { path: '/a', component: A, meta: { lastScroll: null } },
    { path: '/b', component: B, meta: { lastScroll: null } },
  ]
})

const store = new Vuex.Store({
	state: {},
  getters: {},
  actions: {},
  mutations: {}
})

exports.sync(store, router)

new Vue({
	router: router,
  store: store,
  template: `
    <div id="app">
      <ul>
        <li><router-link to="/a">Component A</router-link></li>
        <li><router-link to="/b">Component B</router-link></li>
      </ul>
      {{ this.$store.state.route.path }}
      <router-view></router-view>
    </div>
  `
})
.$mount('#app');