Vue Router - Vue | ToolkitX

01. 前端路由是个啥

单页应用切换页面不用刷新浏览器，靠的就是前端路由。Vue Router 是 Vue 的官方路由库，原理就是监听浏览器地址栏变化，然后根据不同的路径渲染不同的组件。就像你家里有多个房间，路由器根据你走的路径把你带到不同的房间。

javascript

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/views/Home.vue'

const routes = [{ path: '/', component: Home }]
const router = createRouter({
  history: createWebHistory(),
  routes
})
export default router

02. 嵌套路由和路由配置

路由配置就是一个数组，每个元素有 path 和 component。嵌套路由用 children 字段，子路由的 path 前面不用加斜杠。配合 router-view 组件告诉 Vue Router 把匹配到的组件插到哪里。这就像俄罗斯套娃，外层路由的组件里还可以再放一个 router-view 来渲染子路由。

javascript

const routes = [{
  path: '/user',
  component: UserLayout,
  children: [
    { path: 'profile', component: UserProfile },
    { path: 'settings', component: UserSettings }
  ]
}]

嵌套路由特别适合管理后台这种有明显层级结构的页面。

03. 动态路由和路由参数

动态路由就是在路径里用冒号标记一个变量，比如 /user/:id。在组件里通过 route.params.id 拿到这个 id 值。页面切换时如果只是参数变了组件没变，用 watch 监听参数变化来重新请求数据。

javascript

import { useRoute, watch } from 'vue-router'

const route = useRoute()
watch(() => route.params.id, (newId) => {
  fetchUser(newId)
})

路由参数变化时组件默认不会销毁重建，需要手动监听参数变化。

04. 编程式导航和路由守卫

编程式导航就是不用 router-link，直接在 js 里用 router.push 或 router.replace 跳转。路由守卫有点像门卫，在进入路由之前检查你有没有权限，没权限就拦住。beforeEach 是最常用的全局守卫，用来做登录验证。

javascript

import { useRouter } from 'vue-router'

const router = useRouter()
router.push({ name: 'user', params: { id: 123 } })

// 全局守卫
router.beforeEach((to, from) => {
  if (to.meta.requiresAuth && !isLoggedIn()) return '/login'
})

05. 路由懒加载

不做懒加载的话所有页面的 JS 代码会打包在一起，首页加载三秒都不一定能打开。路由懒加载就是用到哪个页面才加载哪个页面的代码，用动态 import 实现。Vue 自动帮你把每个懒加载的组件单独拆成一个 chunk 文件。

javascript

const routes = [{
  path: '/settings',
  component: () => import('@/views/Settings.vue')
}]

所有路由组件都建议用懒加载，首页加载速度翻倍。

知识测验

第 1/4 题正确 0

Vue Router 中用来渲染匹配组件的内置组件是什么？

Pinia 状态管理