Vue JS 3 Tutorial for Beginners #8 - The Vue Router

In this Vue 3 tutorial we'll take a look at the Vue Router in order to make a "multi-page" Vue website. We'll see how to set uo the Vue Router, how to use Router Links, pass route parameters & more.
--- Timestamps ---
0:00 - Why use the Vue Router?
2:36 - Vue Router setup (for new projects)
12:30 - Router links
19:06 - Folder structure
24:54 - Route parameters
31:08 - Dynamic links
36:35 - Redirects & 404's
41:49 - Programmatic navigation
🐱‍💻 🐱‍💻 BUY THE FULL 20-hr COURSE ON UDEMY:
www.thenetninja.co.uk/udemy/v...
🐱‍💻 🐱‍💻 Course Files:
+ github.com/iamshaunjp/Vue-3-F...
🐱‍👤🐱‍👤 JOIN THE GANG -
/ @netninja
🐱‍💻 🐱‍💻 My Udemy Courses:
+ Modern JavaScript - www.thenetninja.co.uk/udemy/m...
+ Vue JS & Firebase - www.thenetninja.co.uk/udemy/v...
+ D3.js & Firebase - www.thenetninja.co.uk/udemy/d...
🐱‍💻 🐱‍💻 Helpful Links:
+ HTML & CSS Course - • HTML & CSS Crash Cours...
+ Get VS Code - code.visualstudio.com/
🐱‍💻 🐱‍💻 Social Links:
Facebook - / thenetninjauk
Twitter - / thenetninjauk
Instagram - / thenetninja

[@kierrboy8613]

CSS style 35:43 job css .job h2 { background: #f4f4f4; padding: 20px; border-radius: 10px; margin: 10px auto; max-width: 600px; cursor: pointer; color: #444; } .job h2:hover { background: #ddd; } .job a { text-decoration: none; } 44:11 button css button { margin: 0 10px; padding: 10px; border: none; border-radius: 4px; }

[@mohamedalqady7427]

if there is alot of people like you the world will be better

[@bobooffice7718]

thank you 🤗

[@BarbaraBezd]

why I noticed that only after a lesson🥲

[@nageshnagansur7904]

God Level Simplicity with explanation .

[@clone1496]

hey man, quick message to thank you for how well everything is explained. it's a blast to watch and i appreiciate you outputting so many videos. thank you

[@user-vx6ll7ri1q]

I'm not an english native speaker but I found this series of videos and I understood everything. These tutorials are just perfect. Thank you!

[@NetNinja]

Great to hear! :) thank you for watching

[@yasharsoleimani27]

I've been searching the Internet for hours to find a video or sth to teach me vue-router simple and fast and you did it the best way. Thanks, man!

[@elliotanimations1067]

I can't express how much you've helped me with your videos. I never understood the Vue environment or how anything links together, and using the CLI always brought back errors. But from the start up until now (haven't got any further just yet!) it's been a total breeze. Thank you so much

[@NetNinja]

That's awesome to hear Elliot :) thanks for the kind words and stick with it!

[@deshantdevkota2563]

same here haha, thanks from my side too

[@sureshramanan6053]

the music that plays when projects get created is hilariously merry and nostalgic!

[@sureshramanan6053]

wanted to say thanks for this very helpful vue tutorial playlist! I am learning vue for the first time and I am feeling great with the exercises!!!

[@unfroz3n118]

I’ve seen studies on this where people mention background music while waiting for a task to be completed, it’s a human subconscious thing I think.

[@oldclient]

It's just a very good explanation of the Vue CLI routing architecture without any fluff words. Not a complex, nor a simple context. Keep do this.

[@hosseinjavan137]

there is no doubt about you being an awesome teacher. But I just realized part of why I like your tutorials is because of your damn beautiful voice. Wish you the best :)

[@ladywebber1726]

my favorite online tutor EVER, many blessings

[@nitinkaushik5144]

Thank you Shaun for making awesome tutorials. You have made web so much easy and fun. It seems like Mario and Luigi are part of my life now :D

[@danishiqbal2047]

Seriously, been trying for two days to find a truly beginner tutorial. All those videos claiming to be beginner friendly have a curse of knowledge where they don't even know what its like to be a beginner. What you did starting this video and upto 2:30 is empathy. Thank you.

[@NetNinja]

Glad it was helpful Danish :) thanks for watching!

[@jgarciascr5]

Beautiful tutorial, very clearly explained to make it really easy to understand. Blessings.

[@nematjonabdulloev3568]

descriptive and easy to follow. Great job 👍👌.

[@NetNinja]

Glad you liked it!

[@the-roc-lover.1]

Wow! Thanks for this amazing tutorial. I never watch any tutorial more than 5 minutes but your's was definitely worth it. I've been trying to understand how Vue router works in comparison to react router, and this video made it clear to me that Vue is definitely going to be my next best framework. Thanks again 👋

[@NetNinja]

You're very welcome! Thanks for your support Riches :)

[@ranjitkumarpk35]

Really Helpful and a good explanation. Thank you so much. I have cleared so many concept from this.

[@neeqquu]

this is the best vue tutorial ever! please never delete this :)

[@AlinaKay47]

Many thanks for such a great and easy to follow video!

[@dianasaramago3304]

Excellent tutorial! It helped me a lot! Thank you very much!!

[@devserendipity3063]

Dude!! Thank you! I will recomend your tutorials to everyone

[@aarondv]

this is the best content about vue.js.. thanks

[@cedrickcampoto2670]

I would like to thank you, because you are very clear in teaching this topic. I mean very.

[@omarmomen2098]

u are amazing sir, i never find some one who can explain like u do, thank u ❤💕

[@guna23785]

He is a Ninja ! Very good way of teaching

[@ya_volk9059]

You are such a brilliant teacher

[@stefanventer575]

Thank you very much. This is exactly what I wanted to know.

[@EduardKaresli]

Gold, as always. Thanks a lot!

[@JohnDoeX1966]

Amazing tutorial. Thank you!

[@minhthongvo5989]

Thank you so much for this tutorials, this help me a lot for my jobs!

[@ramil8029]

These tutorials are so good! Thank you so much @TheNetNinja!

[@NetNinja]

You're very welcome Ramil, thanks for your support!

[@LilStrangeSquirrel]

English isn't my native language but everything sounds so much clear when you explain it. Thank you so much

[@jayce1098]

Thanks Ninja , this a pretty good tutorial series

[@jetzemeilink]

Thanks Shaun for bringing us this quality content and your ability to break things down and explain them clearly. I bought your vue 3 course and it was one of the best courses I've taken so far. You're an incredible help as I'm trying to land my first dev job in Holland.

[@NetNinja]

Thanks so much :) good luck with job hunting, I hope you do really well!

[@jetzemeilink]

@@NetNinja Thanks Shaun. Just got my first job as a junior dev and it was partly due to my Vue knowledge!

[@antoniofuller2331]

"partly" lol

[@Wilhelm_LAS]

Same man haha i just learning vue js to get in to a job as an internship

[@Wilhelm_LAS]

@@antoniofuller2331 sdfkshdfkjf

[@suman-majhi]

one interesting fact.... this video is able to satisfy all viewer .... this video has 0 dislike

[@lucien5112]

oof yall jinxed it

[@kristofferjohansson3768]

@@lucien5112 yeah, that one must be a competitor.

[@arunshetty6413]

Simple and the Best explanation 🎉

[@alexnon8122]

Вот это Ты, многоуважаемый, молодец) Спасибо за столь качественное и детальное разъяснение. 3 года назад на vue писал приложения, да потом забил. Решил вспомнить и пройтись по всему. У Тебя, по сути, самые лучшие уроки. Спасибо. Специально на русском написал, чтобы Ты знал, что смотрят Тебя из разных стран)

[@mtSabariPrasanthG]

i loved the music when it is loading bro

[@jaxparrow1794]

4 months later and 0 dislikes. Thanks man!

[@gennaromanzo2005]

Very nice tutorial, thank you!

[@NetNinja]

Thanks for watching Gennaro :)

[@learnsimple4592]

Thanks, love your tutorials Shaun. When will you updating the ninja sass course. I have been trying to learn sass ever since I learnt html, css and modern js from you. A update to the sass course will be very much appreciated.

[@jimmymbotela6533]

Excellent tutorial! Thank you very much!!keep up the good work 👌👍

[@NetNinja]

Thanks Jimmy :)

[@disneywali8943]

enjoyed your videos, you done great work, Thanks mate

[@Amirhosseindev]

It's such good video because of its simplicity and being short It's a bit hard though for someone who's not have any coding experience But for me it's awesome

[@sarahAmonem]

you are my best teacher ever, ur student from Africa - Sudan 🥳

[@deamonangel2192]

That’s explained itself very well, Great work 🎉

[@NetNinja]

Thanks a lot 😊

[@push2me936]

Thank you a lot! And again let's give that a wow! Best regards from here!

[@mehdimortaz351]

Wonderful. I appreciate for ur useful tutorial.

[@mehlulinokwara3841]

Thanks buddy. I'd recommend every newbie and advanced student of vue and laravel to your great content. Was displeased when I couldn't get you on Java ha ha ha. Consider that sometime.

[@AcidRainbowSkies]

really easy to follow and super clear, thank you! this is super helpful!

[@gillesgoutard9639]

the best as usual!!

[@arifdevcoding]

why did i buy Hitesh Choudury's course, this free video is way better than that. you are great bro! Subscribed!

[@AccessCode101]

It's worth to mention, Shaun, that if we installed vue-router manually and not using the Vue CLI, we need to add vue-router@next, because the createWebHistory was not part of earlier version installments in vue-router before 3.0.

[@Jel.Awesh.M]

For me, it seems to not work for any version before vue-router 4.0

[@saidaouyous861]

Best course ever about vue router 👏

[@NetNinja]

Thanks! :)

[@nidheeshpv8300]

Thank You... Perfect one 💕

[@tr5946]

I like this. I like this very much. You are a good teacher.

[@NetNinja]

Thank you! 😃

[@cardobent5722]

thanks for this video learned allot from here

[@patrikmihalovic5796]

Great stuff man!

[@bortolottic]

Awesome video... congrats!

[@alfriansyah9895]

my english not good , but clearly your tutorial make me understand !! , keep it upp body , huge love from the distance

[@speckyferns6780]

The free tutorials are so good, I'm just going to buy a couple courses from you Net Ninja off Udemy. Thanks so much! Also, love the background music while projects are being created by @vue/cli :)

[@MVRugby]

Dude, thank you so much for this vid. It honestly saved my life!! Well, OK that was a bit over the top, but you saved me from a long drawn out headache. =)

[@NetNinja]

Aha, glad it helped! :)

[@rahulkatre17]

I got a 3.8 lpa just because you thanks man🔥

[@LinuxForLife]

Clear and efficient. Thanks. Vuex is on your roadmap?

[@user-bk6qj7wo6n]

thank you for sharing you knowledge

[@euniceoqui]

You're amazing 😭😭😭

[@balajisri5091]

Thanks a lot man. Great Work.

[@NetNinja]

Thanks Balaji :)

[@michaelvli]

Thanks for your videos, Shaun. They are awesome! Perfect for Vue newbies. One thing that I noticed was that you never get any vulnerabilities when creating a project. I'm on a mac using npm 8.1.0 and node v17.0.1. Should I be concerned that I have over 80+ high and medium vulnerabilities? I have read that devs shouldn't be concerned about vulnerabilities as this is related to the packages/modules that are being used and unless I plan to use something else or fix these vulnerabilities, there's not much that can be done. What do you recommend? Thanks again!

[@ahamster3000]

from Morocco , thank you

[@NetNinja]

Thanks Zakaria :) big love to Morocco!

[@hannahbaker411]

great video thanks for the tutorial sir

[@gmd2171]

Thank you for your time sir.

[@NetNinja]

You're very welcome Ghulam!

[@REZAsys2]

Your tutorials are perfect but make me sleepy xd idk why!

[@abeprangishvili]

you are the best !!!!!!

[@mohammadvempalli3973]

More detailed video👏👏👏

[@kirillbaryba746]

Thanks! Awesome

[@shubhang2877]

Shaun: *exists* Me: Happiness Noises

[@user-ny4yt1kf9v]

GUUUUUUUUUUUUUUUU

[@kiran_hm1748]

You are the best ❤️❤️❤️

[@jimos9878]

Very very very very nice tutorial. Explanatory with such understandable way. I am currently having an issue when I redirect but the page does not change, and I think it has to do with the router view tag, which I would not be able to understand through the documentation of vue... I will definitely visit the other tutorials as well. so stupid of me to not look up any video tutorials so far :S

[@comtarthur]

i love all your videos they helped me so much but please how do you use vue create without typing npx before ?

[@sarahdulat3613]

Nooo you stopped right at the moment I needed! How can I pass more than just the id through the router link? How would the job details get displayed?

[@RobertWildling]

Thank you for that nice series! - What I always wonder is how do you write links inside a text editor of a cms, when routes are "ruling" the navigation? Simply wrapping an a-tag around a word does not work, and standard text editors like ckeditor do not have a router implementation. Any ideas?

[@juhen9]

Legend

[@arturgorbunov3792]

For them who creates project straightforward, not like The Net Ninja => vue create ['name'] => (then) npm install vue-router@4 || (or) npm install vue-router@next => (then) just create all needed folders and files, which you see in the video, by your self. Yes, sometimes you have to do something by your own, create, refactor and so on. Ofc, if someone here is just because Front-End hobby, then we are sorry for these issues.

[@safiakhan5239]

Thank you very much for sharing such a techy topic in so beautiful comprehensive way. I wish my words can express my gratitude towards you. One request please could you please share the code you did in this tutorial please please. Thanks again

[@gustavofrez6185]

CSS : .job h2 { background: #f4f4f4; padding: 20px; border-radius: 10px; margin: 10px auto; max-width: 600px; cursor: pointer; color: #444; } .job h2:hover { background: #ddd; } .job a { text-decoration: none; }

[@kaushikrishi01]

Hey Shaun! What software do you use to create slides ?

[@codeblood87]

Lovely

[@freecourse1842]

Thanks

[@robingiri7281]

you are rock star ...

[@viquiboirasanmarti89]

Thank you very much for the tutorial, it has helped me a lot for my website. But I have a question, how do I update the content of the Job component with a watch, inside the component itself? For example, if a Job had Related Job that can be queried?

[@noushedakib1658]

awesome

[@henriqueaurelio8400]

Which would be the folder structure with a navbar component would be before link router or another component in the components folder?

[@1eagleusa]

Excellent series, I have learned a lot. There is a question I have though, for the 404 NotFound section. In that section the component is within the views/jobs folder but the binding is only to the views folder. It seems to work in your demo, so does that mean that when binding that as long as the root folder is specified the sub folders will be searched for the filename? If the binding to the component requires specific path then why did it work in the demo?

[@RandomAlexus]

Thanks!

[@NetNinja]

Thanks for your support Alexus!

[@RandomAlexus]

@@NetNinja and thank you for the high quality videos!

[@mullla1ya]

Very cool! A bit of a question. When we go to /jobs/gibberish it shows us "Job ID is: gibberish" while this job ID doesn't exist in the array. I know it's dynamically bound but I think it has to show 404 page, isn't it?

[@ganeshdagadi6577]

Normally in a real world application, you send a request to a backend. When the backend responds with a 404, you then show the not found page.

[@reydelocon629]

have u already solved this my g?

[@ridl27]

ty.

[@00el04]

this is the hardest lesson so far

[@dasuneranda]

wow!

[@dimitrioschamarousios1131]

The best part is the loading music (4:18)

[@franklintorres3717]

It's a perfect tutorial. I love it very much, but why you didn't include the children tree?

[@kinax2]

I did the same as you and for some reason when i'm navigating to "/project/:id" i it's navigating from parent and child router -> 2 routers.

[@majdibrahem1399]

thanks

[@NetNinja]

You're welcome!