Refresh the page and keep our location in the app Maintain browser back/forward history functionality Bookmark the URL and even share it with others With Routing, we can…
Server Side Routing The client (i.e. the browser) makes a request to the server on every URL change. Client Side Routing The client only makes a request to the server upon initial-page load. First Meaningful Paint Consistent SEO Performance Faster Routing after Initial Load Smooth transitions and changes Two main methods to achieving routing…
Single-page applications (SPAs) Client side applications are often labelled as… In modern web apps; JS is the driving force to re-render content in SPAs
<br/>import routes from './routes';<br/>export default {<br/>name: "RouterView",<br/>data() {<br/>return {<br/>currentView: {}<br/>}<br/>}<br/>methods: {<br/>getRouteObject() {<br/>return routes.find(<br/>route => route.path === window.location.pathname<br/>);<br/>}<br/>}<br/>created() {<br/>if (!this.getRouteObject()) {<br/>RouterView.vue<br/>import routes from './routes';<br/>methods: {<br/>getRouteObject() {<br/>return routes.find(<br/>route => route.path === window.location.pathname<br/>);<br/>}<br/>}<br/>We’ll set up a getRouteObject() method<br/>responsible in getting the correct route object<br/>from routes based on the window location<br/>
` }; } else { this.currentView = this.getRouteObject().component; } } When the component gets created, we’ll use the getRouteObject method to bind the correct component to currentView
<br/>import CharizardCard from './components/CharizardCard';<br/>export default {<br/>name: "App",<br/>components: {<br/>'charizard-card': CharizardCard<br/>}<br/>};<br/> App.vue
<br/>import RouterView from './router/RouterView';<br/>export default {<br/>name: "App",<br/>components: {<br/>'router-view': RouterView<br/>}<br/>};<br/> Now we’ll have App render the RouterView component
<br/>export default {<br/>name: "RouterLink",<br/>props: {<br/>to: {<br/>type: String,<br/>required: true<br/>}<br/>},<br/>methods: {<br/>navigate(evt) {<br/>evt.preventDefault();<br/>window.history.pushState(null, null, this.to);<br/>}<br/>}<br/>};<br/> methods: { navigate(evt) { evt.preventDefault(); window.history.pushState(null, null, this.to); } } To prevent the browser from making a web request, we’ll create a RouterLink element that pushes a new location with window.history.pushState.
RouterLink RouterView created() RouterView only picks the correct Pokemon component when it gets created. With RouterLink, we may need to send some event to RouterView when clicked.
Responsible in mapping components to respective URL pathnames - routes Component responsible in rendering another specified component based on the app’s location - router-view Component that allows the user to change the location of the browser without making a web request - router-link These are also the same three pieces of the vue-router library. So we’ll now switch over to using it.
https://localhost:8080/#/blastoise Never sent to the server Hash mode URLs vue-router’s default mode is hash which allows to have multiple client side routes without having to provide necessary server-side fallbacks.
https://localhost:8080/blastoise History mode URLs Since our app is a SPA (Single-page app), we don’t need hash-based URLs. We’ll switch our URLS to mode: history.
import Vue from 'vue'; import App from './App'; import router from './router' new Vue({ el: '#app', router, render: h => h(App) }); main.js import Vue from 'vue'; import App from './App'; import router from './router'; new Vue({ el: '#app', router, render: h => h(App) }); To make our app router-aware, we’ll declare the router instance within the entire application Vue instance.
Dynamic Route Matching app/ components/ BlastoiseCard.vue CharizardCard.vue VenusaurCard.vue AlakazamCard.vue EeveeCard.vue GolbatCard.vue WigglytuffCard.vue MachampCard.vue OnixCard.vue MoltresCard.vue ...Card.vue app/ components/ PokemonCard.vue Having a component file for every Pokemon is unrealistic for a much larger app. With Dynamic Route Matching, we can have multiple routes with the same pattern be matched to a single component.
<br/>export default {<br/>name: "PokemonCard",<br/>data() {<br/>return {<br/>pokemonData: {...}<br/>}<br/>}<br/>...<br/>};<br/> Found with - this.$route.params.id; Bind all data dynamically to component
<br/>export default {<br/>name: "CharizardCard",<br/>};<br/> RouterView responsible in rendering the correct nested component based on the nested route.
djirdehh
smasato
onecareer_tech
wakamatsu_takumu
orgachem
route06
you
bigwheel
smt7174
is_ryo
line_developers_tw
tkikuchi1002
kei_s
marcelosomers
rocio
danielanewman
dougneiner
smashingmag
aleyda
tammyeverts
edds
cherdarchuk
jrom
bkeepers
mojombo