Vue Router 路由管理

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

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
];

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

export default router;

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);
app.use(router);
app.mount('#app');

<!-- App.vue -->
<template>
  <nav>
    <router-link to="/">首页</router-link>
    <router-link to="/about">关于</router-link>
  </nav>
  <!-- 匹配到的组件会被渲染到这里 -->
  <router-view />
</template>

import { createRouter, createWebHashHistory } from 'vue-router';

const router = createRouter({
  history: createWebHashHistory(),
  routes
});
// URL 形如：https://example.com/#/user/123

import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  history: createWebHistory(),
  routes
});
// URL 形如：https://example.com/user/123

location / {
  try_files $uri $uri/ /index.html;
}

import { createRouter, createMemoryHistory } from 'vue-router';

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

<template>
  <!-- 字符串写法 -->
  <router-link to="/about">关于</router-link>

  <!-- 对象写法，推荐用命名路由 -->
  <router-link :to="{ name: 'User', params: { id: 123 } }">
    用户主页
  </router-link>

  <!-- 带查询参数 -->
  <router-link :to="{ path: '/search', query: { q: 'vue' } }">
    搜索
  </router-link>

  <!-- 自定义高亮类名 -->
  <router-link to="/" active-class="is-active" exact-active-class="is-exact">
    首页
  </router-link>
</template>

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

const router = useRouter();

function goHome() {
  router.push('/');
}

function goUser(id) {
  router.push({ name: 'User', params: { id } });
}

function loginAndRedirect() {
  // replace 不留历史，登录后用户点后退不会回到登录页
  router.replace('/dashboard');
}

function goBack() {
  router.back();
}
</script>

router.beforeEach((to, from) => {
  const isAuthenticated = !!localStorage.getItem('token');
  if (to.meta.requiresAuth && !isAuthenticated) {
    // 返回一个路由地址表示拦截并重定向
    return { name: 'Login', query: { redirect: to.fullPath } };
  }
  // 返回 true 或不返回，表示放行
  return true;
});

const routes = [
  {
    path: '/user/:id',
    name: 'User',
    component: User,
    props: true // 将 params 作为 props 传入组件，解耦对 $route 的依赖
  }
];

<script setup>
import { useRoute } from 'vue-router';
const route = useRoute();
console.log(route.params.id); // 从 URL /user/123 中拿到 '123'
</script>

<script setup>
import { useRoute } from 'vue-router';
const route = useRoute();
// URL: /search?keyword=vue&page=2
console.log(route.query.keyword); // 'vue'
console.log(route.query.page);    // '2'（注意 query 始终是字符串）
</script>

const routes = [
  {
    path: '/admin',
    component: Admin,
    meta: {
      requiresAuth: true,
      roles: ['admin'],
      title: '管理后台',
      keepAlive: true
    }
  }
];

const routes = [
  {
    path: '/user/:id',
    component: User,
    children: [
      {
        path: '', // 默认子路由，访问 /user/123 时展示
        component: UserOverview
      },
      {
        path: 'profile', // 实际路径 /user/:id/profile
        component: UserProfile
      },
      {
        path: 'settings',
        component: UserSettings
      }
    ]
  }
];

<!-- User.vue -->
<template>
  <div class="user">
    <h1>用户中心</h1>
    <nav>
      <router-link :to="`/user/${$route.params.id}/profile`">资料</router-link>
      <router-link :to="`/user/${$route.params.id}/settings`">设置</router-link>
    </nav>
    <!-- 子路由渲染在这里 -->
    <router-view />
  </div>
</template>

const routes = [
  { path: '/', component: () => import('@/views/Home.vue') },
  { path: '/about', component: () => import('@/views/About.vue') },
  { path: '/dashboard', component: () => import('@/views/Dashboard.vue') }
];

const User = () => import(/* webpackChunkName: "user" */ '@/views/User.vue');
const UserProfile = () => import(/* webpackChunkName: "user" */ '@/views/UserProfile.vue');
// 上面两个组件会被打包进同一个 user chunk

const Chart = () => import(/* webpackPrefetch: true */ '@/views/Chart.vue');

router.beforeEach((to, from) => {
  const token = localStorage.getItem('token');
  if (to.meta.requiresAuth && !token) {
    return { name: 'Login', query: { redirect: to.fullPath } };
  }
  return true;
});

// 后置守卫：统一设置页面标题
router.afterEach((to) => {
  document.title = to.meta.title ? `${to.meta.title} - 我的应用` : '我的应用';
});

function getUserRole() {
  return JSON.parse(localStorage.getItem('user') || '{}').role;
}

router.beforeEach((to) => {
  if (to.meta.roles && to.meta.roles.length) {
    const role = getUserRole();
    if (!to.meta.roles.includes(role)) {
      return { name: 'Forbidden' }; // 跳转 403 页面
    }
  }
  return true;
});

<script setup>
import { onBeforeRouteLeave } from 'vue-router';
import { ref } from 'vue';

const isDirty = ref(false); // 表单是否被修改

onBeforeRouteLeave((to, from) => {
  if (isDirty.value) {
    const answer = window.confirm('有未保存的更改，确定离开吗？');
    if (!answer) return false; // 取消导航
  }
});
</script>

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

const route = useRoute();

// 同一个组件被复用，仅参数变化时手动响应
watch(() => route.params.id, (newId) => {
  fetchUser(newId);
}, { immediate: true });
</script>

// 404 catch-all 路由（放在最后）
{
  path: '/:pathMatch(.*)*',
  name: 'NotFound',
  component: () => import('@/views/NotFound.vue')
}

import type { RouteRecordRaw } from 'vue-router';

const routes: RouteRecordRaw[] = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/Home.vue'),
    meta: { title: '首页' }
  }
];

<!-- App.vue：三个并列的出口 -->
<template>
  <router-view name="header" />
  <div class="body">
    <router-view name="sidebar" />
    <router-view /> <!-- 未命名的即 default -->
  </div>
</template>

const routes = [
  {
    path: '/dashboard',
    components: {
      default: () => import('@/views/DashboardMain.vue'),
      header: () => import('@/views/AppHeader.vue'),
      sidebar: () => import('@/views/AppSidebar.vue')
    }
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes,
  scrollBehavior(to, from, savedPosition) {
    // 浏览器前进/后退时恢复原来的滚动位置
    if (savedPosition) {
      return savedPosition;
    }
    // 有锚点时滚动到锚点
    if (to.hash) {
      return { el: to.hash, behavior: 'smooth' };
    }
    // 默认回到顶部
    return { top: 0 };
  }
});

<template>
  <router-view v-slot="{ Component }">
    <transition name="fade" mode="out-in">
      <component :is="Component" />
    </transition>
  </router-view>
</template>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>

// 登录后根据后端返回的权限动态挂载路由
function setupDynamicRoutes(menuList) {
  menuList.forEach((menu) => {
    router.addRoute({
      path: menu.path,
      name: menu.name,
      component: () => import(`@/views/${menu.component}.vue`),
      meta: { title: menu.title, roles: menu.roles }
    });
  });
}

// 退出登录时移除动态路由，防止权限残留
function resetRoutes(dynamicNames) {
  dynamicNames.forEach((name) => {
    if (router.hasRoute(name)) {
      router.removeRoute(name);
    }
  });
}

function lazyLoad(loader) {
  return () =>
    loader().catch((err) => {
      // 常见于发版后用户手里的旧 index.html 请求已被删除的 chunk
      if (/Loading chunk .* failed/.test(err.message)) {
        window.location.reload();
      }
      throw err;
    });
}

const routes = [
  { path: '/report', component: lazyLoad(() => import('@/views/Report.vue')) }
];

<template>
  <router-view v-slot="{ Component }">
    <Suspense>
      <component :is="Component" />
      <template #fallback>
        <div class="loading">加载中...</div>
      </template>
    </Suspense>
  </router-view>
</template>