✨ Vue Router 路由管理与导航控制指南

vue2-tutorials/single-file/demo2/src/App.vue

@@ -10,7 +10,8 @@
     <!-- <Todo /> -->
     <!-- <Demo8 /> -->
     <!-- <Demo9 /> -->
-    <Demo10 />
+    <!-- <Demo10 /> -->
+    <Demo11 />
   </div>
 </template>
 
@@ -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 },
 };
 </script>

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"),
     },

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
+<transition name="fade" mode="out-in">
+  <router-view></router-view>
+</transition>
+
+<style>
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 0.3s;
+}
+.fade-enter, .fade-leave-to {
+  opacity: 0;
+}
+</style>
+```
+
+## 四、常见问题解决方案
+
+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 | 需要额外配置       | 原生支持                      |
+

vue2-tutorials/single-file/demo2/src/views/demo11/index.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="container card">
+    <div class="card-header btn-group">
+      <!-- 路由导航 -->
+      <button class="btn btn-success" @click="$router.push({ name: 'About' })">
+        显示About
+      </button>
+      <button class="btn btn-success" @click="$router.push({ name: 'Home' })">
+        显示Home
+      </button>
+
+      <!-- 前进和后退 -->
+      <button class="btn btn-primary" @click="back">后退</button>
+      <button class="btn btn-dark" @click="forward">前进</button>
+    </div>
+
+    <div class="card-body">
+      <router-view />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Demo-11",
+  data() {
+    return {};
+  },
+  methods: {
+    /* 后退 */
+    back() {
+      this.$router.back();
+    },
+
+    /* 前进 */
+    forward() {
+      this.$router.forward();
+    },
+
+    /* 跳转指定步数 */
+    go() {
+      this.$router.go(-2);
+    },
+  },
+};
+</script>