All language subtitles for 3. Routing Setup

To install this routing package

quits this running development server

by pressing control see here,

and then run NPM install - - save, Vue-router.

This is another package developed by the official vue team.

So it's an official package,

which you can add to your Vue projects

to add this routing functionality.

Now this will install this package

and once you're done installing it,

you can restart your development server with NPM run serve

but now we'll be able to add a routing to this application.

And what does this mean add routing?

Well, now we can go to main JS

where we create our main Vue app this single app,

which we have here in the end.

And on this app, we can now register this router,

which we just installed

and more importantly,

the routes we wanna have in this project.

So simply the different URLs we wanna support.

And to do that we need to import something

from Vue-router

so from this newly installed package

and that this something is a function create Router

so we have create app from Vue to create a Vue app.

We have create router from Vue router to create a router

for such an app.

We can now create the router here for example,

simply by creating a new constant router,

sounds like a fitting name and calling create router

and storing the result of that call in this constant,

but create router needs some configuration

now it needs to know which different routes

so which different URLs we wanna support

and we can also set up more things.

So for that, you pass a JavaScript object to create router

and in that object, we now got two important options,

which we can set the obvious important option is the

routes option.

Here we register all the routes, the different paths,

the different URLs you could say which you wanna to support

this will be an array because typically

it's not just one route which you want to have in your app

if that would be the case, you don't need to router

so we'll have an array full of routes in here

and I will come back to this route conflict

in just a second,

but there also is another option which you should set.

And that's the history option.

Now that is basically telling the router

how to manage the routing history in this app

so when a user clicks somewhere goes to a different page,

then this new page is added to the browsing history

you could say and if the user then clicks a back button,

the history makes sure that well,

the router knows what the last page was.

And there are two different kinds of history

you could use here.

and we want to import another function from you router here

and that stick, create web history function,

which we then call here as a history option.

Now this might sound confusing,

but historically Java script in the browser,

wasn't always able to manipulate to browsers memory

on which page the user is on

and where the user came from.

Therefore, historically the router

had to emulate this behavior you could say,

and we didn't use the built in browser history,

but since a couple of years, does this no problem

and with create web history by calling this function,

we tell the router,

Hey, just use the browsers built in mechanism

for remembering where to user came from and so on.

And that's the end what we're telling the router here

use to build in browser support simple has that.

Now that's all we got to do related to that.

Now we can focus on those routes

because that's the heart of the router

here we'll be able to tell the router

which Vue component should be loaded

for which URL ,because ultimately that will be our goal.

We wanna to load the team's component,

let's say when we're on our domain slash teams

and we wanna load to the users component,

let's say when we are on our domain slash users,

so let's work on registering routes and loading them next.