diff --git a/package.json b/package.json index 7084826..93d7882 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,8 @@ "dependencies": { "bulma": "^0.6.1", "express": "^4.16.2", - "vue": "^2.5.6" + "vue": "^2.5.6", + "vue-router": "^3.0.1" }, "devDependencies": { "babel-core": "^6.26.0", diff --git a/src/app.js b/src/app.js index ff9ef0d..c6c9c63 100644 --- a/src/app.js +++ b/src/app.js @@ -1,7 +1,9 @@ import Vue from 'vue' import AppLayout from './theme/Layout.vue' +import router from './router' const app = new Vue({ + router, // render is a Vuejs function that will return an elements // This is equivalent to template: '' render: h => h(AppLayout) @@ -10,4 +12,4 @@ const app = new Vue({ // ...AppLayout //this part didn't work. I don't know why but }) -export { app } +export { app, router } diff --git a/src/router.js b/src/router.js new file mode 100644 index 0000000..a1b928b --- /dev/null +++ b/src/router.js @@ -0,0 +1,50 @@ +import Vue from 'vue' +import VueRouter from 'vue-router' +import Category from './theme/Category.vue' +import Login from './theme/Login.vue' +import NotFound from './theme/NotFound.vue' + +// Here we are breaking these up into Async components because if you are only +// visiting one site you don't need all the other components loaded +// WE ARE REVERTING THIS BECAUSE IT IS GREAT FOR CLIENT SIDE rendering +// BUT WE ARE GOING TO DO "SERVER SIDE RENDERING" BY THE END OF THIS +// const Category = () => System.import('./theme/Category.vue') +// const Login = () => System.import('./theme/Login.vue') +// const NotFound = () => System.import('./theme/NotFound.vue') + +Vue.use(VueRouter) + +const router = new VueRouter({ + // We can use the history API in modern Browsers to avoid seeing # in the urlParams + mode: 'history', + // We can change the default router-link-active class for active routes to + // a class that our CSS library can use + linkActiveClass: 'is-active', + // Scroll Behavior is essentionally a method that accepts to path, from path + // and the scroll position that the page was in + // Here we are seeting the y position to 0 so that we scroll to the top of the page + scrollBehavior: (to, from, savedPosition) => ({ y: 0 }), + // In the routes array we can link Routes with Components + routes: [ + { + path: '/category/:id', // Here we are going to use dynamic routing + name: 'category', // this is a naming of the rule it allows us to pass json objects into the router-link to attribute + component: Category + }, + { + path: '/login', + component: Login + }, + { + path: '/', + redirect: '/category/front-end' + }, + { + path: '*', + component: NotFound + } + ] +} +) + +export default router diff --git a/src/theme/AppHeader.vue b/src/theme/AppHeader.vue index c3ddc36..2a61eba 100644 --- a/src/theme/AppHeader.vue +++ b/src/theme/AppHeader.vue @@ -1,10 +1,23 @@ diff --git a/src/theme/Category.vue b/src/theme/Category.vue index ce7e639..47601b7 100644 --- a/src/theme/Category.vue +++ b/src/theme/Category.vue @@ -18,15 +18,42 @@ // whey are we doing it like this? data () { return { - posts: [ + // Vuejs exposes the router through the $route object. With this you can + // actually use the object to navigate by doing something like this.$route.push('/') + // or obtain data like we are below + id: this.$route.params.id, + postsFrontEnd: [ { id: 1, title: 'PWA Stats', content: 'A community-driven list of stats and news related to Progressive Web Apps', link: 'https://www.pwastats.com/' }, { id: 2, title: 'A Comprehensive Guide To HTTP/2 Server Push', content: 'No longer is HTTP/2 a feature we pine for. It has arrived, and with it comes server push!', link: 'https://www.smashingmagazine.com/2017/04/guide-http2-server-push/' }, - { id: 3, title: 'So what’s this GraphQL thing I keep hearing about?', content: 'Why now is the perfect time to learn what exactly this GraphQL thing you keep hearing about really is.', link: 'https://medium.freecodecamp.com/so-whats-this-graphql-thing-i-keep-hearing-about-baf4d36c20cf' }, + { id: 3, title: 'So what’s this GraphQL thing I keep hearing about?', content: 'Why now is the perfect time to learn what exactly this GraphQL thing you keep hearing about really is.', link: 'https://medium.freecodecamp.com/so-whats-this-graphql-thing-i-keep-hearing-about-baf4d36c20cf' } + ], + postsMobile: [ { id: 4, title: 'State of The Mobile Gap Between Native and Web', content: 'Clearly PhoneGap, and Cordova are still required today in the mobile world, but when is it really needed? Did the web ever catch up?', link: 'https://remysharp.com/2016/05/28/state-of-the-gap' }, { id: 5, title: 'Learning JavaScript Design Patterns', content: 'Design patterns are reusable solutions to commonly occurring problems in software design.', link: 'https://addyosmani.com/resources/essentialjsdesignpatterns/book/' }, { id: 6, title: 'The Power of Custom Directives in Vue', content: 'The beautiful thing about Vue is that it\'s incredibly feature-rich.', link: 'https://css-tricks.com/power-custom-directives-vue/' } - ] + ], + posts: [] } + }, + methods: { + loadPosts () { + if (this.id === 'front-end') { + this.posts = this.postsFrontEnd + } else { + this.posts = this.postsMobile + } + } + }, + watch: { + '$route' (to, from) { + this.id = to.params.id + this.loadPosts() + } + }, + created () { + this.loadPosts() + console.log(this.$route.query.page) // This is to show you how easy it is to access the ?page= query param. } + } diff --git a/src/theme/Layout.vue b/src/theme/Layout.vue index 422b3f7..42c32a5 100644 --- a/src/theme/Layout.vue +++ b/src/theme/Layout.vue @@ -3,7 +3,7 @@
- +
@@ -12,12 +12,11 @@ diff --git a/src/theme/Login.vue b/src/theme/Login.vue new file mode 100644 index 0000000..0c4e376 --- /dev/null +++ b/src/theme/Login.vue @@ -0,0 +1,45 @@ + diff --git a/src/theme/NotFound.vue b/src/theme/NotFound.vue new file mode 100644 index 0000000..0b78847 --- /dev/null +++ b/src/theme/NotFound.vue @@ -0,0 +1,5 @@ +