Vue Router is the official router for Vue.js to make building Single Page Applications by allowing you to link URLs to specific components.
Features include:
- Nested route/view mapping
- Modular, component-based router configuration
- Route params, query, wildcards
- View transition effects powered by Vue.js' transition system
- Fine-grained navigation control
- Links with automatic active CSS classes
- HTML5 history mode or hash mode, with auto-fallback in IE9
- Customizable Scroll Behavior
We are going to use vue-router to assign each menu element to the component we want to show. Let's get started!
Setup
Open your terminal and run these commands below:
![Alt Text](https://res.cloudinary.com/practicaldev/image/fetch/s--NHaj6vA6--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/7c2nvum021awbki9p4rb.png)
![Alt Text](https://res.cloudinary.com/practicaldev/image/fetch/s--pyd06ZhE--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/7ugm8vz7vkw3wwocphik.png)
![Alt Text](https://res.cloudinary.com/practicaldev/image/fetch/s--jBMZmC95--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/ji51cvhagr4c4mu3hucq.png)
![Alt Text](https://res.cloudinary.com/practicaldev/image/fetch/s--XM1_o-nl--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/01btismzoq44cmfjzid6.png)
![Alt Text](https://res.cloudinary.com/practicaldev/image/fetch/s--x1Cg7sX8--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/82om72sh6ko5ras5t19k.png)
App.js
Go to the main JavaScript file resources/assets/js/app.js and update with the code below:
![Alt Text](https://res.cloudinary.com/practicaldev/image/fetch/s--UW0aKN9C--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/erv3f3umfr2x2zr5zy60.png)
![Alt Text](https://res.cloudinary.com/practicaldev/image/fetch/s--Rajx3KM2--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/29r1gvpmbyxkjbobq49a.png)
![Alt Text](https://res.cloudinary.com/practicaldev/image/fetch/s--3_77s5ZD--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/kdx596n6ayxcqo1z46il.png)
![Alt Text](https://res.cloudinary.com/practicaldev/image/fetch/s--7kZaYXxu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/p29qccoiotek1ockyxfe.png)
![Alt Text](https://res.cloudinary.com/practicaldev/image/fetch/s--CmQXUwLY--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/8c6rx9pkndgqy8x30pkt.png)
![Alt Text](https://res.cloudinary.com/practicaldev/image/fetch/s--m2TsiC8d--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/l23q9z3cbmqvoi5hth5j.png)
![Alt Text](https://res.cloudinary.com/practicaldev/image/fetch/s--BjtO6lY6--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/rz3qjvak166b0cv12elj.png)
Components
Create the vue.js components
![Alt Text](https://res.cloudinary.com/practicaldev/image/fetch/s--USM0-jiY--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/82gn8kpcp3bpkdrvo60j.png)
![Alt Text](https://res.cloudinary.com/practicaldev/image/fetch/s--ccPQ-DQl--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/ple7pdjzw2ihykcb1kxx.png)
![Alt Text](https://res.cloudinary.com/practicaldev/image/fetch/s--VGcl4pMn--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/cd2mnzfzt9grtkv5e9c6.png)
![Alt Text](https://res.cloudinary.com/practicaldev/image/fetch/s--HoOFDgsb--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/i3srcam7fefeiwy2jpze.png)
View
Update welcome.blade.php
![Alt Text](https://res.cloudinary.com/practicaldev/image/fetch/s--0JV-5Pdq--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/djuxyufiawkr8a7ll077.png)
![Alt Text](https://res.cloudinary.com/practicaldev/image/fetch/s--Cn3XWQx0--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/51wap7bgbxq61zbny4ia.png)
![Alt Text](https://res.cloudinary.com/practicaldev/image/fetch/s--44anxhIa--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/xh5ly1y9g1cyyocauudc.png)
![Alt Text](https://res.cloudinary.com/practicaldev/image/fetch/s--qYKlv6g---/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/axqhlcfyor8yyv45abxf.png)
![Alt Text](https://res.cloudinary.com/practicaldev/image/fetch/s--FibF5A6M--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/45svx3afu9r8pw4qw84z.png)
![Alt Text](https://res.cloudinary.com/practicaldev/image/fetch/s--Z_rpM_MI--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/nqdpfbah5tobxss1x8aa.png)
Styles
Now add some style public/css/mystyle.css
Final Steps
Start the app with the command below:
I hope this example will be of help to you. 🐈
Be creative and have fun along the way.
Song while I was writing the post ☺️ https://open.spotify.com/track/4as4XEOR03oGm1STUKl6pa?si=DwWg9bE7Sdmur8OTQ-7ijA
Thanks for reading!
Have a nice day, coders💜
Top comments (2)
Hola, buscando sobre Vue encontre tu blog, bueno disculpa por poner en spanish es que mi ingles es malo. Bueno me da gusto haber encontrado y espero contactarte pronto. Se me olvidaba soy Alberto espero que aun te acuerdes.
The images are too small.