1.VueRouter安装

// 1. 安装 vue-router
npm install vue-router@4 // Vue 3.x版本
// 或
npm install vue-router@3 // Vue 2.x版本

2.基础配置

创建路由配置文件 router/index.js
import { createRouter, createWebHistory } from 'vue-router'

// 路由配置
const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/Home.vue'),
    meta: {
      title: '首页',
      requiresAuth: true // 是否需要登录
    }
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import('@/views/Login.vue')
  },
  // 嵌套路由
  {
    path: '/user',
    name: 'User',
    component: () => import('@/views/User.vue'),
    children: [
      {
        path: 'profile',
        name: 'UserProfile',
        component: () => import('@/views/UserProfile.vue')
      }
    ]
  },
  // 404页面
  {
    path: '/:pathMatch(.*)*',
    name: 'NotFound',
    component: () => import('@/views/NotFound.vue')
  }
]

// 创建路由实例
const router = createRouter({
  history: createWebHistory(), // 使用 history 模式
  routes
})

export default router

3.在 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')

4.路由导航方法

// 1. 在模板中使用
<template>
  <!-- 路由链接 -->
  <router-link to="/home">首页</router-link>
  <router-link :to="{ name: 'User', params: { id: 123 }}">用户</router-link>

  <!-- 路由视图 -->
  <router-view></router-view>
</template>

// 2. 在 JS 中使用
<script setup>
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()

// 路由跳转方法
const handleNavigation = () => {
  // 1. 基本跳转
  router.push('/home')

  // 2. 带参数跳转
  router.push({
    path: '/user',
    query: { id: 123 }
  })

  // 3. 命名路由跳转
  router.push({
    name: 'User',
    params: { id: 123 }
  })

  // 4. 替换当前路由
  router.replace('/home')

  // 5. 前进/后退
  router.go(1)  // 前进
  router.go(-1) // 后退
  router.back() // 后退
}

// 获取路由参数
const getRouteInfo = () => {
  console.log(route.params.id)  // 路由参数
  console.log(route.query.id)   // 查询参数
  console.log(route.path)       // 当前路径
  console.log(route.name)       // 路由名称
}
</script>

5.路由守卫

// router/index.js

// 1. 全局前置守卫
router.beforeEach((to, from, next) => {
  // 检查是否需要登录
  if (to.meta.requiresAuth && !isAuthenticated()) {
    next('/login')
  } else {
    next()
  }
})

// 2. 全局解析守卫
router.beforeResolve(async (to, from, next) => {
  try {
    // 处理异步组件
    await loadAsyncData(to)
    next()
  } catch (error) {
    next(error)
  }
})

// 3. 全局后置钩子
router.afterEach((to, from) => {
  // 更新页面标题
  document.title = to.meta.title || '默认标题'
})

// 4. 路由独享守卫
const routes = [
  {
    path: '/user',
    component: UserComponent,
    beforeEnter: (to, from, next) => {
      // 路由级别的验证
      if (hasPermission(to)) {
        next()
      } else {
        next('/403')
      }
    }
  }
]

// 5. 组件内守卫
export default {
  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被验证前调用
    next(vm => {
      // 通过 vm 访问组件实例
    })
  },
  beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    next()
  },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    const answer = window.confirm('确定要离开吗？')
    if (answer) {
      next()
    } else {
      next(false)
    }
  }
}

 6.进阶用法

// 1. 路由元信息
const routes = [
  {
    path: '/user',
    meta: {
      title: '用户中心',
      requiresAuth: true,
      roles: ['admin', 'user']
    }
  }
]

// 2. 路由过渡效果
<template>
  <router-view v-slot="{ Component }">
    <transition name="fade">
      <component :is="Component" />
    </transition>
  </router-view>
</template>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>

// 3. 滚动行为
const router = createRouter({
  history: createWebHistory(),
  routes,
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { top: 0 }
    }
  }
})

7.最佳实践

// 1. 路由懒加载
const routes = [
  {
    path: '/user',
    component: () => import(/* webpackChunkName: "user" */ '@/views/User.vue')
  }
]

// 2. 路由权限控制
const checkPermission = (to) => {
  const userRoles = getUserRoles()
  return to.meta.roles.some(role => userRoles.includes(role))
}

// 3. 错误处理
router.onError((error) => {
  console.error('路由错误:', error)
  router.push('/error')
})