Vue Router 入门笔记

最小可用配置

自学时我习惯先搭一个能跑的路由表，再逐步加动态参数和守卫。

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

const routes = [
  { path: '/', component: Home },
  { path: '/vue', component: VueNotes },
  { path: '/notes/:id', component: NoteDetail }
]

export const router = createRouter({
  history: createWebHistory(),
  routes
})

动态参数

详情页常用 /notes/:id。组件内通过 route.params.id 读取，记得参数变化时可能需要重新请求数据。

简单守卫

初学阶段我只用全局前置守卫做很薄的一层判断，比如「未准备好的页面先回首页」。 复杂权限逻辑先不往路由里堆，避免后期难维护。

← 返回 Vue 笔记目录