Adding routing

The routing feature is an essential part of any modern web application. Routing allows us to switch between different screens and have dedicated URL addresses for particular features.

The Vue CLI allows us to utilize the vue add command so that we can add additional plugins. Let's use it to install the router library:

  1. Run the following command in the project root:
vue add router
  1. When asked about history mode, type Y as your answer:
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
A: Y
  1. Now, you should have multiple modified files, as shown in the following code: 
  Successfully invoked generator for plugin: core:router
The following files have been updated / added:

src/router.js
src/views/About.vue
src/views/Home.vue
package-lock.json
package.json
src/App.vue
src/main.js
  1. Start the application and pay attention to the bottom of the screen. It now contains two new links: Home and About:

  1. Now, click the About link to see what happens. The Electron application should switch to the About component:

Now, you are able to build multiple views for your application. Let's learn how we can use UI toolkits to save time.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.222.22.244