Vue3中隐藏的路由实用技巧小结

// 1. 基础通配符 - 只能匹配一级路径
{
  path: '/:pathMatch(.*)',
  component: NotFound
}

// 2. 增强通配符 - 匹配多级路径 (推荐！)
{
  path: '/:pathMatch(.*)*',  // 注意多了一个*
  component: NotFound
}

// 3. 旧版写法 (不推荐)
{
  path: '*',
  redirect: '/404'
}

// 提取多段路径参数
{
  path: '/user/:id+:action+', 
  // 匹配 /user/123/profile 得到 params: { id: '123', action: 'profile' }
  // 匹配 /user/456/settings/security 得到 params: { id: '456', action: 'settings/security' }
}

// 可选参数与正则约束
{
  path: '/search/:type(blog|article)?/:keyword', 
  // /search/article/vue  => { type: 'article', keyword: 'vue' }
  // /search/vue          => { type: undefined, keyword: 'vue' }
}

// 1. 简单重定向
{ path: '/home', redirect: '/' }

// 2. 命名路由重定向
{ path: '/account', redirect: { name: 'userProfile' } }

// 3. 动态返回重定向目标
{
  path: '/redirect/:path',
  redirect: to => decodeURIComponent(to.params.path)
}

// 4. 相对位置重定向
{ path: '/users/:id', redirect: './profile' } // 跳转到 /users/:id/profile

// 5. 带查询参数的重定向
{ path: '/go-search', redirect: { path: '/search', query: { from: 'redirect' } } }

// 6. 保留hash的重定向
{ path: '/old', redirect: to => ({ ...to, path: '/new' }) }

// 7. 404智能回退
{
  path: '/:path(.*)',
  redirect: to => {
    // 根据路径智能跳转不同404页面
    return to.path.startsWith('/admin') 
      ? '/admin-404' 
      : '/not-found'
  }
}

{
  path: '/dashboard',
  meta: {
    // 权限控制
    requiresAuth: true,
    permissions: ['view_dashboard'],
    
    // SEO优化
    title: '控制面板',
    metaTags: [
      { name: 'description', content: '主控台页面' },
      { property: 'og:image', content: '/dashboard-preview.jpg' }
    ],
    
    // 过渡动画
    transition: 'slide-left',
    
    // 功能开关
    featureFlags: ['new_ui', 'experimental_chart'],
    
    // 性能优化
    preload: true,
    keepAlive: true,
    
    // 埋点追踪
    analytics: {
      pageView: true,
      event: 'page_enter_dashboard'
    }
  }
}

export default {
  beforeRouteEnter(to, from, next) {
    // 这里不能访问this！
    next(vm => {
      // 但可以在回调中访问组件实例
      vm.fetchData(to.params.id)
    })
  },
  
  beforeRouteUpdate(to, from, next) {
    // 监听相同路由的参数变化
    if (to.params.id !== from.params.id) {
      this.refreshData(to.params.id)
    }
    next()
  },
  
  beforeRouteLeave(to, from, next) {
    // 表单未保存提示
    if (this.unsavedChanges) {
      next(confirm('确定要离开吗？未保存的更改将会丢失'))
    } else {
      next()
    }
  }
}

// 1. 带加载状态的懒加载
const UserProfile = defineAsyncComponent({
  loader: () => import('./UserProfile.vue'),
  loadingComponent: LoadingSpinner,
  delay: 200, // 延迟显示加载组件
  timeout: 3000 // 超时时间
})

// 2. 预加载策略
{
  path: '/dashboard',
  component: () => import(/* webpackPrefetch: true */ './Dashboard.vue')
}

// 3. 分组打包
const User = () => import(/* webpackChunkName: "user" */ './User.vue')
const UserProfile = () => import(/* webpackChunkName: "user" */ './Profile.vue')

{
  path: '/user/:id',
  components: {
    default: UserProfile,
    sidebar: UserSidebar
  },
  props: {
    default: true, // 将params.id作为props传递
    sidebar: route => ({ 
      userId: route.params.id,
      collapsed: route.query.collapsed === 'true'
    })
  }
}

// 运行时添加路由
const router = createRouter({ /* ... */ })

// 添加管理后台路由（权限控制）
if (user.isAdmin) {
  router.addRoute({
    path: '/admin',
    component: AdminLayout,
    children: [
      { path: 'dashboard', component: AdminDashboard },
      { path: 'users', component: UserManagement }
    ]
  })
}

// 删除路由的两种方式
router.removeRoute('admin') // 通过命名路由
router.getRoutes().forEach(route => {
  if (route.path.startsWith('/experimental')) {
    router.removeRoute(route.name)
  }
})

const router = createRouter({
  scrollBehavior(to, from, savedPosition) {
    // 1. 返回顶部按钮触发
    if (to.hash) {
      return {
        el: to.hash,
        behavior: 'smooth',
        top: 30 // 偏移量
      }
    }
    
    // 2. 浏览器前进后退
    if (savedPosition) {
      return savedPosition
    }
    
    // 3. 特定路由记住位置
    if (from.meta.saveScroll) {
      return false // 不滚动
    }
    
    // 4. 默认行为
    return { top: 0 }
  }
})

// 1. 条件性缓存
<router-view v-slot="{ Component }">
  <keep-alive :include="cachedViews">
    <component :is="Component" :key="$route.fullPath" />
  </keep-alive>
</router-view>

// 2. 基于路由meta的缓存控制
computed: {
  cachedViews() {
    return this.$route.matched
      .filter(route => route.meta.keepAlive)
      .map(route => route.components.default.name)
  }
}

// 3. 手动控制缓存
import { useDeactivated } from 'vue'

export default {
  setup() {
    onDeactivated(() => {
      // 组件离开时执行清理
    })
  }
}

// 1. 路由变更日志
router.afterEach((to, from) => {
  console.log(
    `%c[路由变更] %c${from.path} → %c${to.path}`,
    'color: gray',
    'color: #999',
    'color: #4CAF50; font-weight: bold'
  )
})

// 2. 路由信息注入全局
app.config.globalProperties.$routeInfo = {
  current: computed(() => router.currentRoute.value),
  history: [] // 自定义路由历史记录
}

// 3. 可视化路由树
console.log(
  '%c路由树结构',
  'color: purple; font-weight: bold',
  router.getRoutes().map(route => ({
    path: route.path,
    name: route.name,
    children: route.children.map(c => c.path)
  }))
)