Router En Vuejs

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:.

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.

The way we configure this is a little different then we did in Vue 2.

Notice we export this at the bottom because we’ll need to import it in our main.js file.

Importing our Routes & using Vue Router. Next we’ll need to edit our main.js file to use our router in our application.

Here we’re importing our router file, and then we use the router when creating our application. The way our application is created in this file has changed in Vue 3.

Using and . There are two directives our Vue application gives us to use in our template:.

- When a route is navigated to in the browser, this is where the component is rendered.

For example, in our code going to / will render the Home component where we list .

- This is the directive we use to create links between our different component pages, instead of using .

These both can be used in our simple example in App.vue like so: (FYI, I erased what was already in the App.vue). We’ll need to create our Home and About components which we referenced above.

Instead of putting them in our /components/ directory, I’m going to create a new /views directory. They’re going to be really simple for our example:.

And now if we fire up our server and head up to [http://localhost:8080](http://localhost:8080) we should see the following:.

Much of the above configuration and setup you can actually have Vue 3 do for you from the CLI, but it’s valuable to know how to do it on your own.

  1. If you create a new Vue Project:. Then you select “Manually select features”.
  2. You can select Vue Router:. The latest version of Vue Router will be installed, and it will pre-generate most of the same configuration we’ve created above.

In our router we specified optional names in our routes: Home and About. If we wanted to use route names instead of paths, we could write our router-links like so:.

Now our navigation works the same as before, but we’re not using paths.

This can be useful if our URL paths change in the future. We wouldn’t have to change all the router-links if the path changes, since they’re referencing using name.

  1. If we want to create a path URL which has a variable, like /user/gregg or event/5 where the ‘gregg’ or ‘5’ can be any name or any number, we need a Dynamic Segment.
  2. This is done JUST like we used to do it in Vue 2.
  3. In the router, we specify in our route with the : denoting the variable.

(Don’t forget to import the User view in our route if you’re following along).