Vue.js: Vue Router 路由

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

const routes = [
  { path: '/', component: () => import('@/views/HomePage.vue') },
  { path: '/products', component: () => import('@/views/ProductsPage.vue') },
  { path: '/orders', component: () => import('@/views/OrdersPage.vue') },
  { path: '/users', component: () => import('@/views/UsersPage.vue') },
  { path: '/settings', component: () => import('@/views/SettingsPage.vue') }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

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

// 1. 定义路由（懒加载）
const routes = [
  { path: '/', component: () => import('@/views/HomePage.vue') },
  { path: '/products', component: () => import('@/views/ProductsPage.vue') }
]

// 2. 创建 router 实例
const router = createRouter({
  // history 模式：URL 无 #（推荐）
  history: createWebHistory(),
  // hash 模式：URL 带 #（兼容老浏览器）
  // history: createWebHashHistory(),
  
  routes,
  
  // 滚动行为：路由切换时滚到顶部
  scrollBehavior(to, from, savedPosition) {
    return savedPosition || { top: 0 }
  }
})

export default router

const routes = [
  { path: '/', component: () => import('@/views/HomePage.vue') },
  { path: '/about', component: () => import('@/views/AboutPage.vue') },
  { path: '/contact', component: () => import('@/views/ContactPage.vue') }
]

const routes = [
  // /products/123
  { 
    path: '/products/:id', 
    component: () => import('@/views/ProductDetailPage.vue') 
  },
  // /users/456/posts/789
  { 
    path: '/users/:userId/posts/:postId', 
    component: () => import('@/views/PostPage.vue') 
  },
  // 可选参数
  { 
    path: '/news/:category?', 
    component: () => import('@/views/NewsPage.vue') 
  }
]

<!-- ProductDetailPage.vue 接收参数 -->
<script setup>
import { useRoute } from 'vue-router'

const route = useRoute()
console.log(route.params.id)  // '123'
</script>

const routes = [
  {
    path: '/users',
    component: () => import('@/views/UsersPage.vue'),
    children: [
      {
        path: '',  // 默认子路由
        component: () => import('@/views/UsersListPage.vue')
      },
      {
        path: ':id',  // /users/123
        component: () => import('@/views/UserDetailPage.vue')
      }
    ]
  }
]

const routes = [
  { 
    path: '/products/:id', 
    name: 'product-detail',  // 命名路由
    component: () => import('@/views/ProductDetailPage.vue') 
  }
]

<!-- 通过 name 跳转，避免硬编码 URL -->
<router-link :to="{ name: 'product-detail', params: { id: 123 } }">
  Product 123
</router-link>

const routes = [
  { path: '/', component: () => import('@/views/HomePage.vue') },
  // ... 其他路由
  {
    path: '/:pathMatch(.*)*',  // 匹配所有未定义的路由
    component: () => import('@/views/NotFoundPage.vue')
  }
]

初始地址为 #/ 时 Home 链接高亮，内容区显示「🏠 Home / 这是首页」，底部显示「当前路由: / | 历史栈: 1 步」，「← 后退」按钮置灰。
点击 About 后内容变为「ℹ️ About / 关于我们」，历史栈变为 2 步，「← 后退」可用。
点击 User 123 显示「👤 User 123 / 用户资料页」；点击 Products 显示「📦 Products / 商品列表页…」。
点「← 后退」回到上一页，内容区与「当前路由」同步更新，历史栈只剩 1 步时后退按钮再次置灰。

import { useRouter } from 'vue-router'

const router = useRouter()

function goToProduct(id) {
  router.push(`/products/${id}`)  // 字符串
  // 或
  router.push({ name: 'product-detail', params: { id } })  // 对象
}

function goBack() {
  router.back()  // 后退
}

function goForward() {
  router.forward()  // 前进
}

function replaceCurrent() {
  router.replace('/login')  // 替换（不留历史）
}

初始打开（地址栏没有 hash）时路径显示 /，当前页面「首页 Home」，hash 变化次数 0。
点 push('/products')：地址栏变 #/products，页面变「商品列表 Products」，次数 1。
点 replace('/search')：地址变 #/search，页面变「搜索结果 Search」，次数 2。
此时点 back()（或浏览器后退）：直接回到初始的首页 /，#/products 那条记录已被 replace 覆盖——replace 不留历史。

// 1. 全局前置守卫（最常用）
router.beforeEach((to, from, next) => {
  const isLoggedIn = !!localStorage.getItem('token')
  
  if (to.meta.requiresAuth && !isLoggedIn) {
    next('/login')  // 跳登录
  } else {
    next()  // 放行
  }
})

// 2. 路由独享守卫
const routes = [
  {
    path: '/admin',
    component: () => import('@/views/AdminPage.vue'),
    beforeEnter: (to, from, next) => {
      if (isAdmin()) next()
      else next('/403')
    }
  }
]

// 3. 组件内守卫
// 组件内：beforeRouteEnter / beforeRouteUpdate / beforeRouteLeave

// router/index.js
router.beforeEach((to, from, next) => {
  const token = localStorage.getItem('token')
  const isLoggedIn = !!token
  
  // 需要登录的页面
  if (to.meta.requiresAuth && !isLoggedIn) {
    return next({ 
      name: 'login', 
      query: { redirect: to.fullPath }  // 登录后跳回
    })
  }
  
  // 已登录访问登录页
  if (to.name === 'login' && isLoggedIn) {
    return next({ name: 'home' })
  }
  
  next()
})

// 路由 meta 配置
const routes = [
  {
    path: '/dashboard',
    component: () => import('@/views/DashboardPage.vue'),
    meta: { requiresAuth: true }  // 需要登录
  }
]

// router/index.js
router.beforeEach((to, from, next) => {
  const token = localStorage.getItem('token')
  const isLoggedIn = !!token

  if (to.meta.requiresAuth && !isLoggedIn) {
    return next({ name: 'login', query: { redirect: to.fullPath } })
  }

  if (to.name === 'login' && isLoggedIn) {
    return next({ name: 'home' })
  }

  next()
})

// 路由 meta 配置
const routes = [
  {
    path: '/dashboard',
    component: () => import('@/views/DashboardPage.vue'),
    meta: { requiresAuth: true }  // 需要登录
  }
]

未登录访问 /dashboard 时被重定向到 /login?redirect=/dashboard，地址栏保留原目标路径。
已登录再访问 /login 会直接跳到首页，不会停留在登录页。
访问公开页或已登录访问受保护页时守卫调用 next()，目标页面正常渲染。