From 90e512b9778724364df1a09ad2543bc2d3322918 Mon Sep 17 00:00:00 2001
From: bunny <1319900154@qq.com>
Date: Sun, 22 Jun 2025 20:11:49 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Vue=20Router=20=E8=B7=AF=E7=94=B1?=
=?UTF-8?q?=E7=AE=A1=E7=90=86=E4=B8=8E=E5=AF=BC=E8=88=AA=E6=8E=A7=E5=88=B6?=
=?UTF-8?q?=E6=8C=87=E5=8D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
vue2-tutorials/single-file/demo2/src/App.vue | 8 +-
.../single-file/demo2/src/router/index.js | 2 +
.../Vue Router 路由管理与导航控制指南.md | 148 ++++++++++++++++++
.../demo2/src/views/demo11/index.vue | 46 ++++++
4 files changed, 201 insertions(+), 3 deletions(-)
create mode 100644 vue2-tutorials/single-file/demo2/src/views/demo11/Vue Router 路由管理与导航控制指南.md
create mode 100644 vue2-tutorials/single-file/demo2/src/views/demo11/index.vue
diff --git a/vue2-tutorials/single-file/demo2/src/App.vue b/vue2-tutorials/single-file/demo2/src/App.vue
index 4f36dbb..4964e57 100644
--- a/vue2-tutorials/single-file/demo2/src/App.vue
+++ b/vue2-tutorials/single-file/demo2/src/App.vue
@@ -10,7 +10,8 @@
-
+
+
@@ -23,11 +24,12 @@
// import Todo from "@/views/todo/index.vue";
// import Demo8 from "@/views/demo8/index.vue";
// import Demo9 from "@/views/demo9/index.vue";
-import Demo10 from "@/views/demo10/index.vue";
+// import Demo10 from "@/views/demo10/index.vue";
+import Demo11 from "@/views/demo11/index.vue";
export default {
name: "App",
// components: { Demo1, Demo2, Demo3 },
- components: { Demo10 },
+ components: { Demo11 },
};
diff --git a/vue2-tutorials/single-file/demo2/src/router/index.js b/vue2-tutorials/single-file/demo2/src/router/index.js
index 3f2113d..0a6434b 100644
--- a/vue2-tutorials/single-file/demo2/src/router/index.js
+++ b/vue2-tutorials/single-file/demo2/src/router/index.js
@@ -3,10 +3,12 @@ import VueRouter from "vue-router";
const router = new VueRouter({
routes: [
{
+ name: "About",
path: "/about",
component: () => import("@/views/demo6/components/About.vue"),
},
{
+ name: "Home",
path: "/home",
component: () => import("@/views/demo6/components/Home.vue"),
},
diff --git a/vue2-tutorials/single-file/demo2/src/views/demo11/Vue Router 路由管理与导航控制指南.md b/vue2-tutorials/single-file/demo2/src/views/demo11/Vue Router 路由管理与导航控制指南.md
new file mode 100644
index 0000000..597c568
--- /dev/null
+++ b/vue2-tutorials/single-file/demo2/src/views/demo11/Vue Router 路由管理与导航控制指南.md
@@ -0,0 +1,148 @@
+# Vue Router 路由管理与导航控制指南
+
+## 一、路由导航核心方法
+
+### 1. 编程式导航 API
+
+| 方法 | 说明 | 示例 |
+| --------- | --------------------- | -------------------------------- |
+| `push` | 添加新路由记录 | `this.$router.push('/about')` |
+| `replace` | 替换当前路由 | `this.$router.replace('/login')` |
+| `go` | 在历史记录中前进/后退 | `this.$router.go(-1)` |
+| `back` | 后退一步 | `this.$router.back()` |
+| `forward` | 前进一步 | `this.$router.forward()` |
+
+### 2. 命名路由使用
+```javascript
+// 路由配置
+{
+ path: '/about',
+ name: 'About', // 命名路由
+ component: About
+}
+
+// 导航使用
+this.$router.push({ name: 'About' })
+```
+
+## 二、最佳实践建议
+
+### 1. 导航封装方案
+```javascript
+// utils/navigation.js
+export const navTo = (name, params = {}) => {
+ router.push({ name, params })
+}
+
+// 组件中使用
+import { navTo } from '@/utils/navigation'
+methods: {
+ goToAbout() {
+ navTo('About')
+ }
+}
+```
+
+### 2. 导航守卫整合
+```javascript
+// 全局前置守卫
+router.beforeEach((to, from, next) => {
+ if (to.meta.requiresAuth && !isAuthenticated()) {
+ next({ name: 'Login' })
+ } else {
+ next()
+ }
+})
+```
+
+### 3. 路由懒加载
+```javascript
+// 路由配置优化
+const routes = [
+ {
+ path: '/about',
+ component: () => import('@/views/About.vue')
+ }
+]
+```
+
+## 三、高级路由模式
+
+### 1. 动态路由匹配
+```javascript
+// 路由配置
+{
+ path: '/user/:id',
+ component: User
+}
+
+// 组件中获取参数
+this.$route.params.id
+```
+
+### 2. 嵌套路由实践
+```javascript
+const routes = [
+ {
+ path: '/dashboard',
+ component: Dashboard,
+ children: [
+ { path: 'profile', component: Profile },
+ { path: 'settings', component: Settings }
+ ]
+ }
+]
+```
+
+### 3. 路由过渡动画
+```html
+
+
+
+
+
+```
+
+## 四、常见问题解决方案
+
+1. **路由重复导航错误**：
+ ```javascript
+ // 捕获重复导航错误
+ this.$router.push('/path').catch(err => {
+ if (err.name !== 'NavigationDuplicated') {
+ console.error(err)
+ }
+ })
+ ```
+
+2. **页面刷新参数丢失**：
+ ```javascript
+ // 使用query代替params
+ this.$router.push({ path: '/user', query: { id: 123 } })
+ ```
+
+3. **滚动行为控制**：
+ ```javascript
+ const router = new VueRouter({
+ scrollBehavior(to, from, savedPosition) {
+ return savedPosition || { x: 0, y: 0 }
+ }
+ })
+ ```
+
+## 五、与Vue3 Router对比
+
+| 特性 | Vue2 Router | Vue3 Router |
+| --------- | ------------------ | ----------------------------- |
+| 创建方式 | `new VueRouter()` | `createRouter()` |
+| 历史模式 | `mode: 'history'` | `history: createWebHistory()` |
+| 路由匹配 | 基于path-to-regexp | 基于正则表达式 |
+| 组合式API | 需要额外配置 | 原生支持 |
+
diff --git a/vue2-tutorials/single-file/demo2/src/views/demo11/index.vue b/vue2-tutorials/single-file/demo2/src/views/demo11/index.vue
new file mode 100644
index 0000000..2284041
--- /dev/null
+++ b/vue2-tutorials/single-file/demo2/src/views/demo11/index.vue
@@ -0,0 +1,46 @@
+
+
+
+
+