**Course Title:** Mastering Vue.js: Building Modern Web Applications **Section Title:** Vue Router: Building SPAs **Topic:** Build a single-page application with multiple views using Vue Router, implementing navigation and route guards.(Lab topic) In this lab, we will create a single-page application (SPA) using Vue Router, which will have multiple views. We'll implement navigation between these views and secure certain routes using route guards. **Prerequisites** * Familiarity with Vue Router and its core concepts * Understanding of Vue.js and its ecosystem * Basic knowledge of JavaScript and HTML/CSS **Objective** By the end of this lab, you will be able to: * Create a single-page application with multiple views using Vue Router * Implement navigation between views * Secure certain routes using route guards **Step 1: Create a new Vue project** Create a new Vue project using the Vue CLI tool by running the command `vue create vue-router-lab` in your terminal. **Step 2: Install Vue Router** Install Vue Router by running the command `npm install vue-router` in your terminal. **Step 3: Configure Vue Router** In the `src` directory, create a new file called `router.js`. This file will contain the configuration for our Vue Router. ```javascript import Vue from 'vue' import VueRouter from 'vue-router' import Home from '@/views/Home.vue' Vue.use(VueRouter) const routes = [ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', component: () => import('@/views/About.vue') }, { path: '/contact', name: 'Contact', component: () => import('@/views/Contact.vue'), meta: { requiresAuth: true } } ] const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes }) export default router ``` **Step 4: Create views** Create three new files in the `src/views` directory: `Home.vue`, `About.vue`, and `Contact.vue`. These files will contain the HTML, CSS, and JavaScript for each of our views. **Home.vue** ```html <template> <div> <h1>Welcome to our site!</h1> <p> <router-link to="/about">About</router-link> | <router-link to="/contact">Contact</router-link> </p> </div> </template> ``` **About.vue** ```html <template> <div> <h1>About our site</h1> <p> This is the about page. </p> <p> <router-link to="/">Home</router-link> | <router-link to="/contact">Contact</router-link> </p> </div> </template> ``` **Contact.vue** ```html <template> <div> <h1>Contact us</h1> <p> This is the contact page. </p> <p> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link> </p> </div> </template> ``` **Step 5: Implement navigation** In our `Home.vue`, `About.vue`, and `Contact.vue` files, we've already implemented navigation between views using the `router-link` component. **Step 6: Implement route guards** To secure the contact page, we'll implement a route guard that checks if the user is authenticated before allowing access to the page. ```javascript import Vue from 'vue' import VueRouter from 'vue-router' import Home from '@/views/Home.vue' Vue.use(VueRouter) const routes = [ // ... { path: '/contact', name: 'Contact', component: () => import('@/views/Contact.vue'), meta: { requiresAuth: true }, beforeEnter: (to, from, next) => { if (localStorage.getItem('authenticated') === 'true') { next() } else { next({ name: 'Home' }) } } } ] ``` **Step 7: Test the application** Start the application by running the command `npm run serve` in your terminal. Go to `http://localhost:8080` in your browser and test the navigation and route guards. **Conclusion** In this lab, we created a single-page application with multiple views using Vue Router. We implemented navigation between views and secured certain routes using route guards. This is a basic implementation and you can enhance it according to your requirements. **What's next?** In the next topic, we'll learn about state management and the Vuex architecture. We'll explore how to manage state in a Vue application and how to use Vuex to make our application more maintainable and scalable. **Exercise** * Implement a route guard that checks if the user is an administrator before allowing access to the contact page. * Add more views to the application and implement navigation between them. * Experiment with different route guard scenarios. **External Resources** * Vue Router Documentation: https://router.vuejs.org/ * Vuex Documentation: https://vuex.vuejs.org/ **Leave a comment or ask for help** If you have any questions or need help with the exercise, please leave a comment below.