Challenge 1

Challenges are opportunities to test what you have learned by interacting directly with live code.

For this challenge, you will create a router instance setting the history mode and routes. Follow the steps below.

1. Import createRouter and createWebHashHistory methods from vue-router
2. Create a routes array with two routes. The first with a path of '/' and points to the Home view. The second with a path of '/about' and points to the About view.
3. Create a router instance. Set the history option to use Hash Mode. Set the routes options to the routes array.
4. Add the router instance to the Vue application.

NOTE

The Vue Router library has already been installed. All changes will be made to the main.js file.

Solution

import { createApp } from 'vue'
import App from './App.vue'

import Home from './views/Home.vue'
import About from './views/About.vue'

/* 1. Import vue router methods  */
import { createRouter, createWebHashHistory } from 'vue-router'

/* 2. Create routes array */
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]


/* 3. Create router instance */
const router = createRouter({
  history: createWebHashHistory(),
  routes: routes
})

/* 4. Add router instance to vue application */
createApp(App).use(router).mount('#app')