vue router详解和用法

以下是 Vue Router 的详解及核心用法，综合官方文档和最佳实践整理而成：

---

‌一、基础配置与概念‌

1. ‌路由定义‌

   • 通过数组定义路由映射规则，每个路由包含 path（路径）和 component（对应组件）。
   • 示例：

     javascriptCopy Code

     const routes = [ { path: '/', component: Home }, { path: '/about', component: About } ]

2. ‌路由实例化‌

   • 创建路由器实例并注入 Vue 应用：

     javascriptCopy Code

     import { createRouter, createWebHistory } from 'vue-router' const router = createRouter({ history: createWebHistory(), routes }) app.use(router)

     createWebHistory 启用 History 模式（需服务器支持），createWebHashHistory 启用 Hash 模式。

---

‌二、路由导航与渲染‌

1. ‌导航组件‌

   • <router-link>：替代 <a> 标签实现无刷新跳转，通过 to 属性指定目标路径48。

     vueCopy Code

     <router-link to="/about">关于</router-link>

   • <router-view>：作为占位符渲染匹配的组件。

2. ‌编程式导航‌

   • 通过 this.$router.push() 或 router.push() 跳转路由：

     javascriptCopy Code

     // 路径字符串 this.$router.push('/user') // 对象形式 this.$router.push({ path: '/user', query: { id: 1 } })

     支持 replace()（无历史记录）、go()（前进/后退）等方法。

---

‌三、动态路由与传参‌

1. ‌动态路径参数‌

   • 使用冒号 : 定义动态段：

     javascriptCopy Code

     { path: '/user/:id', component: User }

     组件内通过 $route.params.id 获取参数。

2. ‌查询参数与状态‌

   • URL 查询参数（?key=value）：通过 $route.query 获取。
   • 状态传参（不显示在 URL）：

     javascriptCopy Code

     this.$router.push({ path: '/user', state: { data } })

     目标组件通过 history.state 访问‌‌。

---

‌四、进阶功能‌

1. ‌路由守卫‌

   • ‌全局守卫‌：控制整体导航流程（如登录验证）：

     javascriptCopy Code

     router.beforeEach((to, from, next) => { /* 逻辑 */ })

   • ‌路由独享守卫‌：在路由配置中定义 beforeEnter。
   • ‌组件内守卫‌：beforeRouteEnter、beforeRouteUpdate 等。

2. ‌路由懒加载‌

   • 动态导入组件提升首屏性能：

     javascriptCopy Code

     { path: '/admin', component: () => import('./Admin.vue') }

     ‌‌

3. ‌嵌套路由‌

   • 通过 children 属性实现布局嵌套：

     javascriptCopy Code

     { path: '/dashboard', component: Dashboard, children: [ { path: 'profile', component: Profile } // 渲染在 Dashboard 的 <router-view> 中 ] }

     ‌‌

4. ‌缓存与过渡动画‌

   • 配合 <keep-alive> 缓存组件状态：

     vueCopy Code

     <keep-alive> <router-view /> </keep-alive>

   • 结合 <transition> 添加路由切换动画。

---

‌五、常见问题处理‌

• ‌刷新白屏‌：确保 History 模式服务器配置正确（重定向到 index.html）。
• ‌动态添加路由‌：通过 router.addRoute() 动态注册路由。
• ‌捕获未匹配路由‌：定义通配符路由 path: '/:pathMatch(.*)*' 跳转 404 页