Router Basics

Preview — 3 of 10 questions

What is the correct way to create a Vue Router instance in Vue 3?

javascript

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from './views/HomeView.vue'
import AboutView from './views/AboutView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    { path: '/', component: HomeView },
    { path: '/about', component: AboutView },
    { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFoundView }
  ]
})

// Register with the app
import { createApp } from 'vue'
const app = createApp(App)
app.use(router)
app.mount('#app')

Anew VueRouter({ routes })

BcreateRouter({ history: createWebHistory(), routes })

CVue.use(Router, { routes })

Drouter({ mode: 'history', routes })

What is the correct way to create an internal navigation link with Vue Router?

javascript

<template>
  <nav>
    <!-- Basic link -->
    <router-link to="/">Home</router-link>

    <!-- Named route -->
    <router-link :to="{ name: 'about' }">About</router-link>

    <!-- With params -->
    <router-link :to="{ name: 'user', params: { id: 123 } }">
      User Profile
    </router-link>

    <!-- Custom active class -->
    <router-link
      to="/settings"
      active-class="nav-active"
      exact-active-class="nav-exact-active"
    >
      Settings
    </router-link>
  </nav>
</template>

A<a href="/about">About</a>

B<router-link to="/about">About</router-link>

C<vue-link path="/about">About</vue-link>

D<navigate to="/about">About</navigate>

What does <router-view> do in a Vue application?

javascript

<!-- App.vue -->
<template>
  <nav>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
  </nav>

  <!-- Route-matched component renders here -->
  <router-view />

  <!-- With transition using scoped slot -->
  <router-view v-slot="{ Component }">
    <transition name="fade" mode="out-in">
      <component :is="Component" :key="$route.path" />
    </transition>
  </router-view>
</template>

AIt lists all available routes as a navigation menu

BIt wraps all router-link components for layout styling

CIt renders the component matched by the current route URL

DIt provides a dropdown for route selection during development

Answer all 10 questions (7 more), see explanations for every answer, and track your score.