Vue3 Router

Posted on  by admin

If you’re looking to learn the new Vue Router that uses Vue 3, you’re in the right place.

Many things are the same in Vue 3 using Vue Router, but there are a few small differences from Vue 2. In this article, my aim is to give you an introduction to Vue Router for Vue 3, while highlighting the differences for those of you already familiar with the Router.

Vue is powerful for creating Single Page Applications: highly interactive webpages that don’t refresh when you change from page to page.

If your website has multiple pages (or “views”) and you’re using Vue, that’s why you need Vue Router. I’m going to be building Vue 3 routing by starting with a basic Vue 3 app that I created using the Vue 3 CLI.

Feel free to code along. From the command line I’ll need the most up-to-date CLI. You can do this by running:. Then we’ll create our basic Vue 3 app. This will give us a screen where we’re going to choose to use “Vue 3 Preview”:. This will create a base Vue 3 application, and we can ensure it works by going into the directory and running the server:.

Where to Continue Learning

Yarn

Then when we go to [http://localhost:8080](http://localhost:8080) we should see our server running. To install Vue Router into our base Vue 3 project (as we created above) or into an existing project that already uses Vue 3, we’ll follow the steps below:.

Install the Vue 3 Router from the Command Line. Add a routing directory & configuration file. Notice that we create our routes in an array, where we specify for each route a few important items:. Path - the URL path where this route can be found. Name - An optional name to use when we link to this route.

Component - Which component to load when this route is called.

Below this array you’ll notice we create the Router itself, using the routes and we also pass in createWebHistory. This is used to switch from using hash to history mode inside your browser, using the HTML5 history API.