Vue.js: Vue Router 路由

<!-- ❌ 翻车版：用 v-if 切换 5 个组件 -->
<template>
  <div>
    <button @click="currentPage = 'home'">Home</button>
    <button @click="currentPage = 'products'">Products</button>
    <button @click="currentPage = 'orders'">Orders</button>
    
    <div v-if="currentPage === 'home'"><HomePage /></div>
    <div v-else-if="currentPage === 'products'"><ProductsPage /></div>
    <div v-else-if="currentPage === 'orders'"><OrdersPage /></div>
    <div v-else>Page not found</div>
  </div>
</template>

// 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

<!-- App.vue -->
<template>
  <nav>
    <router-link to="/">Home</router-link>
    <router-link to="/products">Products</router-link>
    <router-link to="/orders">Orders</router-link>
  </nav>
  
  <!-- ✅ 关键：router-view 渲染当前路由的组件 -->
  <router-view />
</template>

// 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

// src/main.js
const { createApp } = Vue
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(router)  // 注册路由
app.mount('#app')

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')
      }
    ]
  }
]

<!-- UsersPage.vue -->
<template>
  <div>
    <h1>Users</h1>
    <router-view />  <!-- 子路由出口 -->
  </div>
</template>

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')
  }
]

<template>
  <!-- 字符串路径 -->
  <router-link to="/products">Products</router-link>
  
  <!-- 命名路由（推荐） -->
  <router-link :to="{ name: 'products' }">Products</router-link>
  
  <!-- 动态参数 -->
  <router-link :to="{ name: 'product-detail', params: { id: 123 } }">
    Product 123
  </router-link>
  
  <!-- Query 参数 -->
  <router-link :to="{ path: '/search', query: { q: 'vue' } }">
    Search
  </router-link>
</template>

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')  // 替换（不留历史）
}

// 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 }  // 需要登录
  }
]

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

<style>
a { padding: 6px 12px; margin: 2px; text-decoration: none; color: #333; }
a.active { background: #42b883; color: white; border-radius: 4px; }
.page { padding: 1rem; border: 1px solid #ddd; margin-top: 0.5rem; min-height: 80px; }
</style>

<div id="app">
  <nav>
    <a href="#/" :class="{ active: route === '/' }">Home</a>
    <a href="#/about" :class="{ active: route === '/about' }">About</a>
    <a href="#/user/123" :class="{ active: route === '/user/123' }">User 123</a>
    <a href="#/products" :class="{ active: route === '/products' }">Products</a>
  </nav>

  <div class="page">
    <component :is="currentPage"></component>
  </div>

  <p style="color: #999; font-size: 0.85rem;">
    当前路由: {{ route }} | 历史栈: {{ history.length }} 步
  </p>
  <button @click="goBack" :disabled="history.length <= 1">← 后退</button>
  <button @click="goForward" :disabled="!canForward">前进 →</button>
</div>

<script>
const { createApp, ref, computed, onMounted, onUnmounted } = Vue

// 5 个页面组件
const Home = { template: '<h3>🏠 Home</h3><p>这是首页</p>' }
const About = { template: '<h3>ℹ️ About</h3><p>关于我们</p>' }
const User = {
  props: ['id'],
  template: '<h3>👤 User {{ id }}</h3><p>用户资料页</p>'
}
const Products = {
  template: '<h3>📦 Products</h3><p>商品列表页（动态参数示例：<code>useRoute().params.id</code>）</p>'
}
const NotFound = { template: '<h3>❌ 404 Not Found</h3>' }

// 路由表
const routes = {
  '/': Home,
  '/about': About,
  '/user/123': User,
  '/products': Products
}

const App = {
  components: { Home, About, User, Products, NotFound },
  setup() {
    const route = ref(window.location.hash.slice(1) || '/')
    const history = ref([route.value])
    const forwardStack = ref([])

    function updateRoute() {
      const newRoute = window.location.hash.slice(1) || '/'
      if (newRoute !== route.value) {
        history.value.push(newRoute)
        forwardStack.value = []
        route.value = newRoute
      }
    }

    onMounted(() => window.addEventListener('hashchange', updateRoute))
    onUnmounted(() => window.removeEventListener('hashchange', updateRoute))

    function goBack() {
      if (history.value.length > 1) {
        const last = history.value.pop()
        forwardStack.value.push(last)
        const prev = history.value[history.value.length - 1]
        window.location.hash = prev
      }
    }

    function goForward() {
      if (forwardStack.value.length > 0) {
        const next = forwardStack.value.pop()
        history.value.push(next)
        window.location.hash = next
      }
    }

    // 解析动态参数
    const currentPage = computed(() => {
      if (routes[route.value]) {
        // 动态路由：/user/123 匹配 User 组件
        if (route.value.startsWith('/user/')) {
          return { ...User, props: { id: route.value.split('/')[2] } }
        }
        return routes[route.value]
      }
      return NotFound
    })

    const canForward = computed(() => forwardStack.value.length > 0)

    return { route, history, currentPage, goBack, goForward, canForward }
  }
}

createApp(App).mount('#app')
</script>

// 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 }  // 需要登录
  }
]