YouTipArticle Detail Page
Current Article ID: {{ route.params.id }}
Vue3 Blog Vue Router
## Route Jump
In this chapter, you will learn how to implement front-end and back-end separated page jumps using Vue Router, including dynamic route parameters.
* * *
## Why Use Routing?
Traditional multi-page websites request a new HTML file from the server when clicking links, causing the entire page to refresh with white screen flickering.
Vue Router implements front-end routing: when the URL changes, it doesn't send a request to the server, but instead uses JS to dynamically switch the displayed components.
Benefits: No refresh page switching, experience as smooth as native APP.
* * *
## Vue Router Core Concepts
| Concept | Purpose | Corresponding Code |
| --- | --- | --- |
| Route Table | Defines mapping between URL paths and components | `routes` array |
| Route Outlet | Location where matched components are rendered | `` |
| Dynamic Route | URL contains variables (e.g., article ID) | `/post/:id` |
* * *
## Installation and Configuration
If you selected Router when creating the project, you can skip the installation step.
If not, run in terminal:
$ npm install vue-router@4
### Create Route Configuration File
## Example
// File path: src/router/index.js
import{ createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
// Route table: each record maps a path to a component
const routes =[
{
path:'/',// URL path
name:'home',// Route name (optional, used for programmatic navigation)
component: HomeView // Corresponding page component
},
{
// Dynamic route: :id is a placeholder, matches any value
// /post/1, /post/2, /post/hello will all match this route
path:'/post/:id',
name:'post',
// Lazy loading: loads when accessed, will be split into separate JS file during build
component:()=>import('../views/PostView.vue')
}
]
// Create router instance
const router = createRouter({
history: createWebHistory(),// Use HTML5 History mode (URL looks like normal path)
routes // Register route table
})
export default router
> Difference between two routing modes: createWebHistory produces clean URLs (/post/1), requires server configuration support. If deployment environment is uncertain, use createWebHashHistory, which includes # in URL (/#/post/1), no server configuration needed.
### Register Router in main.js
## Example
RouterView is the core outlet of the routing system.
When URL is `/`, it renders HomeView; when URL is `/post/1`, it renders PostView.
* * *
## RouterLink — Declarative Navigation
RouterLink is the navigation component provided by Vue Router, replacing traditional `` tags.
It doesn't trigger page refresh, only switches displayed components through JS.
## Example
Home
Read Article {{ article.id }}
* * *
## useRoute — Reading Route Parameters
In the detail page PostView, you need to know what the article ID is in the URL to find the corresponding article.
useRoute is used to read current route information.
## Example
> The value of `route.params.id` is always a string. Even if URL is `/post/3`, you get `'3'` not number `3`. When you need a number, convert using `Number(route.params.id)` or `parseInt`.
* * *
## Hands-on: Complete Article Detail Page
Make BlogCard clickable for navigation, and the detail page shows complete article content based on ID.
### Step 1: Modify BlogCard to Support