Router Basics — Series 2

Preview — 3 of 10 questions

What's the practical difference between these two composables?

javascript

<script setup>
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

console.log(route.params.id)     // reads something
router.push('/dashboard')         // does something
</script>

AThey're interchangeable aliases for the same object — route and router both expose identical properties and methods

BuseRoute() is only available inside <script setup>; useRouter() works everywhere, including outside components

CuseRoute() returns the current route's reactive information (params, query, path, meta, etc.) — read-only data about where you are; useRouter() returns the router instance itself, used to navigate (push, replace, back, etc.) and to access router-wide configuration

DuseRouter() is deprecated in favor of useRoute() — both navigation and route info now live on the single route object

What's the visible difference in the resulting URLs?

javascript

import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'

// Option A
const router1 = createRouter({
  history: createWebHistory(),
  routes: [/* ... */],
})

// Option B
const router2 = createRouter({
  history: createWebHashHistory(),
  routes: [/* ... */],
})

AThere's no visible difference — both produce identical URLs; the difference is purely about which browser APIs are used internally

BcreateWebHistory() requires Internet Explorer; createWebHashHistory() is the modern default for all other browsers

CcreateWebHashHistory() produces URLs like example.com/#/users/42 — the route is encoded after a #; createWebHistory() produces clean URLs like example.com/users/42, using the browser's native History API, but requires server-side configuration to correctly serve index.html for every route path (since the server sees a real, distinct-looking path for each route)

DcreateWebHistory() only works for single-page apps with fewer than a fixed number of routes; larger apps must use createWebHashHistory()

What URL does this <router-link> navigate to?

javascript

<template>
  <router-link :to="{ path: '/search', query: { q: 'vue', page: 2 } }">
    Search results
  </router-link>
</template>

AThis throws a compile error — :to only accepts a plain string path, never an object

BOnly the path key is used — the query key is silently ignored unless passed as a separate :query prop

CThe object form navigates using client-side router.push() immediately on render, regardless of whether the link is ever clicked

DThe object form lets you build a URL from its parts — Vue Router serializes { path: '/search', query: { q: 'vue', page: 2 } } into /search?q=vue&page=2, equivalent to writing to="/search?q=vue&page=2" directly, but without manually constructing and encoding the query string by hand

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