Vue Router 4踩坑

16.1 Vue Router 4路由配置的变化陷阱

核心知识点

• Vue Router 4路由配置的变化
• 路由配置的常见错误
• 路由配置的最佳实践

常见错误场景

错误场景1：路由配置格式错误

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

// 错误：路由配置格式错误
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // 错误：使用了旧版的component配置
    component: () => import('../views/About.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

错误原因：路由配置格式错误，Vue Router 4的配置格式与Vue Router 3基本相同，但需要注意一些细节。

正确实现：

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

// 正确：路由配置格式
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // 正确：使用动态导入
    component: () => import('../views/About.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

错误场景2：路由模式配置错误

// router/index.js
import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'

// 错误：路由模式配置错误
const router = createRouter({
  // 错误：同时配置了两种模式
  history: createWebHistory(),
  hash: createWebHashHistory()
  routes
})

错误原因：路由模式配置错误，只能选择一种路由模式。

正确实现：

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

// 正确：选择一种路由模式
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

16.2 Vue Router 4导航守卫的使用误区

核心知识点

• Vue Router 4导航守卫的变化
• 导航守卫的执行顺序
• 导航守卫的常见错误

常见错误场景

错误场景1：导航守卫的参数变化

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

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

// 错误：使用了旧版的导航守卫参数
router.beforeEach((to, from, next) => {
  // 错误：使用next()
  if (to.meta.requiresAuth && !isLoggedIn) {
    next('/login')
  } else {
    next()
  }
})

错误原因：Vue Router 4的导航守卫不再使用next()函数，而是使用返回值。

正确实现：

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

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

// 正确：使用Vue Router 4的导航守卫
router.beforeEach((to, from) => {
  if (to.meta.requiresAuth && !isLoggedIn) {
    return '/login'
  }
})

错误场景2：导航守卫的异步处理错误

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

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

// 错误：异步导航守卫的处理错误
router.beforeEach((to, from) => {
  // 错误：没有使用async/await
  checkAuth().then(isAuthenticated => {
    if (to.meta.requiresAuth && !isAuthenticated) {
      return '/login'
    }
  })
})

function checkAuth() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(false)
    }, 1000)
  })
}

错误原因：异步导航守卫的处理错误，需要使用async/await。

正确实现：

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

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

// 正确：使用async/await处理异步导航守卫
router.beforeEach(async (to, from) => {
  const isAuthenticated = await checkAuth()
  if (to.meta.requiresAuth && !isAuthenticated) {
    return '/login'
  }
})

function checkAuth() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(false)
    }, 1000)
  })
}

16.3 Vue Router 4路由传参的常见错误

核心知识点

• Vue Router 4路由传参的方式
• 路由传参的常见错误
• 路由传参的最佳实践

常见错误场景

错误场景1：路由传参方式错误

<template>
  <div>
    <h1>Home</h1>
    <!-- 错误：路由传参方式错误 -->
    <router-link :to="{ name: 'About', params: { id: 1 } }">About</router-link>
  </div>
</template>

<script setup>
// 组件内容
</script>

错误原因：路由传参方式错误，需要在路由配置中定义参数。

正确实现：

// router/index.js
const routes = [
  {
    path: '/about/:id',
    name: 'About',
    component: () => import('../views/About.vue')
  }
]

<template>
  <div>
    <h1>Home</h1>
    <!-- 正确：路由传参方式 -->
    <router-link :to="{ name: 'About', params: { id: 1 } }">About</router-link>
  </div>
</template>

<script setup>
// 组件内容
</script>

错误场景2：路由参数获取错误

<template>
  <div>
    <h1>About {{ id }}</h1>
  </div>
</template>

<script setup>
import { useRoute } from 'vue-router'

// 错误：路由参数获取错误
const route = useRoute()
const id = route.params.id
</script>

错误原因：路由参数获取错误，需要注意参数的类型转换。

正确实现：

<template>
  <div>
    <h1>About {{ id }}</h1>
  </div>
</template>

<script setup>
import { useRoute, computed } from 'vue-router'

const route = useRoute()
// 正确：使用computed获取路由参数
const id = computed(() => parseInt(route.params.id))
</script>

16.4 Vue Router 4动态路由的陷阱

核心知识点

• Vue Router 4动态路由的使用
• 动态路由的常见错误
• 动态路由的最佳实践

常见错误场景

错误场景1：动态路由配置错误

// router/index.js
const routes = [
  // 错误：动态路由配置错误
  {
    path: '/user/:id?',
    name: 'User',
    component: () => import('../views/User.vue')
  }
]

错误原因：动态路由配置错误，可选参数的配置方式正确，但需要注意组件中的处理。

正确实现：

// router/index.js
const routes = [
  // 正确：动态路由配置
  {
    path: '/user/:id?',
    name: 'User',
    component: () => import('../views/User.vue')
  }
]

<template>
  <div>
    <h1>{{ id ? `User ${id}` : 'User List' }}</h1>
  </div>
</template>

<script setup>
import { useRoute, computed } from 'vue-router'

const route = useRoute()
const id = computed(() => route.params.id)
</script>

错误场景2：动态路由的匹配顺序错误

// router/index.js
const routes = [
  // 错误：动态路由的匹配顺序错误
  {
    path: '/user/:id',
    name: 'User',
    component: () => import('../views/User.vue')
  },
  {
    path: '/user/profile',
    name: 'UserProfile',
    component: () => import('../views/UserProfile.vue')
  }
]

错误原因：动态路由的匹配顺序错误，应该将具体的路由放在动态路由之前。

正确实现：

// router/index.js
const routes = [
  // 正确：动态路由的匹配顺序
  {
    path: '/user/profile',
    name: 'UserProfile',
    component: () => import('../views/UserProfile.vue')
  },
  {
    path: '/user/:id',
    name: 'User',
    component: () => import('../views/User.vue')
  }
]

16.5 Vue Router 4嵌套路由的使用误区

核心知识点

• Vue Router 4嵌套路由的使用
• 嵌套路由的常见错误
• 嵌套路由的最佳实践

常见错误场景

错误场景1：嵌套路由配置错误

// router/index.js
const routes = [
  {
    path: '/user',
    name: 'User',
    component: () => import('../views/User.vue'),
    // 错误：嵌套路由配置错误
    children: [
      {
        path: 'profile',
        name: 'UserProfile',
        component: () => import('../views/UserProfile.vue')
      }
    ]
  }
]

错误原因：嵌套路由配置错误，需要在父组件中添加。

正确实现：

<template>
  <div>
    <h1>User</h1>
    <!-- 正确：添加router-view -->
    <router-view></router-view>
  </div>
</template>

<script setup>
// 组件内容
</script>

错误场景2：嵌套路由的路径配置错误

// router/index.js
const routes = [
  {
    path: '/user',
    name: 'User',
    component: () => import('../views/User.vue'),
    children: [
      // 错误：嵌套路由的路径配置错误
      {
        path: '/user/profile',
        name: 'UserProfile',
        component: () => import('../views/UserProfile.vue')
      }
    ]
  }
]

错误原因：嵌套路由的路径配置错误，嵌套路由的路径应该是相对路径。

正确实现：

// router/index.js
const routes = [
  {
    path: '/user',
    name: 'User',
    component: () => import('../views/User.vue'),
    children: [
      // 正确：嵌套路由的路径配置
      {
        path: 'profile',
        name: 'UserProfile',
        component: () => import('../views/UserProfile.vue')
      }
    ]
  }
]

16.6 Vue Router 4懒加载的常见问题

核心知识点

• Vue Router 4懒加载的使用
• 懒加载的常见错误
• 懒加载的最佳实践

常见错误场景

错误场景1：懒加载实现错误

// router/index.js
const routes = [
  {
    path: '/about',
    name: 'About',
    // 错误：懒加载实现错误
    component: import('../views/About.vue')
  }
]

错误原因：懒加载实现错误，需要使用箭头函数。

正确实现：

// router/index.js
const routes = [
  {
    path: '/about',
    name: 'About',
    // 正确：懒加载实现
    component: () => import('../views/About.vue')
  }
]

错误场景2：懒加载的命名错误

// router/index.js
const routes = [
  {
    path: '/about',
    name: 'About',
    // 错误：懒加载的命名错误
    component: () => import('../views/About.vue')
  }
]

错误原因：懒加载的命名错误，应该使用webpackChunkName注释。

正确实现：

// router/index.js
const routes = [
  {
    path: '/about',
    name: 'About',
    // 正确：懒加载的命名
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

16.7 Vue Router 4历史模式的部署陷阱

核心知识点

• Vue Router 4历史模式的部署
• 历史模式的常见错误
• 历史模式的最佳实践

常见错误场景

错误场景1：历史模式部署错误

# 错误：历史模式部署错误
server {
  listen 80;
  server_name example.com;
  
  location / {
    root /var/www/html;
    index index.html;
  }
}

错误原因：历史模式部署错误，需要配置try_files。

正确实现：

# 正确：历史模式部署
server {
  listen 80;
  server_name example.com;
  
  location / {
    root /var/www/html;
    index index.html;
    try_files $uri $uri/ /index.html;
  }
}

错误场景2：base路径配置错误

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

// 错误：base路径配置错误
const router = createRouter({
  history: createWebHistory('/app/'),
  routes
})

错误原因：base路径配置错误，需要与部署路径一致。

正确实现：

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

// 正确：base路径配置
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

16.8 Vue Router 4与Vue 3的集成问题

核心知识点

• Vue Router 4与Vue 3的集成
• 集成的常见错误
• 集成的最佳实践

常见错误场景

错误场景1：集成方式错误

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

// 错误：集成方式错误
const app = createApp(App)
app.use(router)
app.mount('#app')

错误原因：集成方式错误，Vue Router 4的集成方式正确，但需要注意版本兼容性。

正确实现：

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

// 正确：集成方式
const app = createApp(App)
app.use(router)
app.mount('#app')

错误场景2：useRoute和useRouter的使用错误

<template>
  <div>
    <h1>Home</h1>
    <button @click="navigate">Navigate</button>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'

// 错误：useRouter的使用错误
const router = useRouter()

function navigate() {
  // 错误：导航方式错误
  router.push({ path: '/about' })
}
</script>

错误原因：useRouter的使用错误，Vue Router 4的导航方式正确，但需要注意参数。

正确实现：

<template>
  <div>
    <h1>Home</h1>
    <button @click="navigate">Navigate</button>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'

// 正确：useRouter的使用
const router = useRouter()

function navigate() {
  // 正确：导航方式
  router.push('/about')
}
</script>