Create basic applications with routers in Vuejs

Tram Ho

Hello friends. Today I will continue the series about Vuejs. Today I will guide you to create a basic application with the router

If you want to create a simple website with Vuejs and want to do it as quickly as possible. Then my example below will help you make a simple web quickly.

If you do not have Vue installed on your computer, install Vue via the terminal:

Then create your application:

Now cd into the project directory. Then if you want to see information what you are doing. Let's set up the server renderer :

And now you can enter yarn serve or npm run serve , and you will get a "Hello World" Vuejs page that provides useful links to the Vue document. Before you decide to delete only the "Hello World" component "and all HTML. I think you should save this HTML somewhere in case you might need to refer to it again.

Now install the Vue Router:

In your project, open main.js You will need to enter VueRouter as well as any components you may have that you need routers. You also need to add the Vue.use (VueRouter) line.

Now you need to add the router object for your application. Use this tool to map the router to the components you have imported. I recommend adding mode :

And then add the router to Vue's example:

Now switch to the App.vue file. Inside your template, inside the <div> tag add a router-view with your components inside

Also make sure that all the components you import must be included here. In this template I will also place a <Nav/> tag. In my Nav.vue file, I add the router link tags to Now I can switch between different components.


This may not be a complex dynamic web application, but it will get you started with being able to build a basic web site with routers with Vue. If you have any questions please leave a comment. below.


Refer to more details

https://vuejs.org/v2/guide/routing.html

Share the news now

Source : Viblo