Press "Enter" to skip to content

Vue.js Basics Ep. 12 – Intro to Vue Router | Router-View + Router-Link Tags



[ Vue Basics Ep. 12 ] [ Vue.js ]
# Intro to Vue Router | Router-View + Router-Link Tags

In this session, we will be going over Vue Router. This plugin allows use to expand and organize our applications. The Vue Router mimics the user experience of browsing a full multi-page website/app including history functionality, while behind the scene still remaining all within our index.html file.

## Helpful Links

[ Vue Router Docs ] – https://router.vuejs.org/

[ HATT Web News Guest ] – https://www.youtube.com/watch?v=AId8IX2lT1k

## TIMELINE
====================================
9:04 – Session Start (late start)
9:32 – What is a Router and What are Routes?
12:18 – Initializing a New Vue Project for Vue-Router Demo
18:24 – Bringing Vue-Router into an Existing Project
22:46 – History vs. Hash Mode
23:55 – A First Look at the Router Integrated App
28:46 – Code Housekeeping and Failed Experiment
30:00 – What is a $Route Object?
32:32 – Writing out First Route
33:26 – Failed Project Interweaving Experiment
34:58 – Writing our First Router-Link
39:12 – Rewriting with a Working Example
43:11 – Creating our First Dynamic View
53:00 – Route Navigating Programatically
56:16 – Writing our First Dynamic Route
59:09 – Multiple Ways to Push Routes
1:10:45 – Session Wrap Up
1:14:00 – Session End
====================================

# Project Repo:
https://github.com/rabbitwerks/lcs–vue-basics/tree/ep12–session-start
Simple clone the project and install dependencies for the parent repo each mini project repos that we have written. Run npm install in each repos root folder, one level up from /src

# RabbitWerks.js Discord
https://discord.gg/P882WwD

# HTML All The Things Podcast
Check out the Podcast Here!
https://podcast.htmlallthethings.com/

# Check out DVLFE for all things Developer Clothing!
Save 25% on orders with coupon code RABBITWERKS

Home

## Music from RabbitWerks CodeBeatz Spotify Playlist

Live project work. Coding in JavaScript.
Please feel free to leave a comment or suggestion in the chat!

Thank you and Enjoy!

#vuejs #tutorial #livestream #basics #javascript #beginners #vue #vuex #state #getters #mutations #actions

Leave a Reply

avatar
  Subscribe  
Notify of