在 Vue 中，vue-router 是官方的路由管理插件，用于在单页面应用（SPA）中实现不同页面的切换。在此介绍 Vue 2 和 Vue 3 中路由的使用。
1. 安装 vue-router
如果是 Vue 2：
npm install vue-router@3
如果是 Vue 3：
npm install vue-router@4
2. 基本路由配置
创建 router/index.js 作为路由配置文件。
Vue 2
# 路由文件
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';Vue.use(VueRouter);# 定义路由规则
const routes = [{ path: '/', component: Home },{ path: '/about', component: About }
];# 创建路由实例
const router = new VueRouter({mode: 'history', // 使用 history 模式，去掉 URL 中的 #routes
});export default router;
Vue 3
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';const routes = [{ path: '/', component: Home },{ path: '/about', component: About }
];const router = createRouter({history: createWebHistory(),routes
});export default router;
3. 在 Vue 项目中使用路由
(1) 在 main.js 中注册路由
Vue 2
import Vue from 'vue';
import App from './App.vue';
import router from './router';Vue.config.productionTip = false;# 挂载根实例
new Vue({router, // 挂载路由render: h => h(App)
}).$mount('#app');
Vue 3
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';const app = createApp(App);
app.use(router);
app.mount('#app');
(2) 在 App.vue 中添加路由出口
<template><div><nav><router-link to="/">首页</router-link><router-link to="/about">关于</router-link></nav><router-view></router-view></div>
</template>
<router-link>用于创建路由导航，to属性指定跳转路径。<router-view>是路由出口，显示当前匹配的组件。
4. 动态路由
(1) 定义动态路由
const routes = [{ path: '/user/:id', component: User }
];
(2) 在 User.vue 组件中获取动态参数
<template><div><h2>用户 ID：{{ $route.params.id }}</h2></div>
</template><script>
export default {mounted() {console.log('用户 ID:', this.$route.params.id);}
};
</script>
Vue 3 Composition API
<script setup>
import { useRoute } from 'vue-router';const route = useRoute();
console.log('用户 ID:', route.params.id);
</script>
5. 路由重定向和别名
(1) 重定向
const routes = [{ path: '/', redirect: '/home' },{ path: '/home', component: Home }
];
(2) 路由别名
const routes = [{ path: '/home', component: Home, alias: '/index' }
];
这样访问 /index 也会展示 Home 组件。
6. 路由守卫
Vue 的 路由守卫（Navigation Guards） 主要用于在路由跳转前后执行特定逻辑，比如：
✅ 权限控制（如登录验证）
✅ 数据预加载（在进入页面前获取数据）
✅ 路由切换时的动画或离开提示
✅ 记录用户访问路径（比如保存上一次访问的页面）
(1) 路由守卫的分类
Vue Router 提供了三种类型的守卫：
| 守卫类型 | 作用范围 | 触发时机 |
|---|---|---|
| 全局守卫 | 作用于所有路由 | 路由跳转前后 |
| 路由独享守卫 | 作用于某个特定路由 | 进入该路由前 |
| 组件内守卫 | 作用于某个组件 | 进入、更新、离开该组件时 |
(2)全局守卫
1.beforeEach（全局前置守卫）
用于 拦截导航，一般用于 登录权限校验。
router.beforeEach((to, from, next) => {console.log('全局前置守卫：', to.path);if (to.meta.requiresAuth && !localStorage.getItem('token')) {next('/login'); // 未登录，跳转到登录页} else {next(); // 继续路由跳转}
});
next() 说明：
next()继续导航next(false)取消导航next('/login')跳转到指定路径
2. beforeResolve（全局解析守卫）
Vue 2.5+ 新增，在 beforeEach 和 beforeEnter 之后执行，所有组件内守卫执行前触发，用于等待异步数据加载完成。
router.beforeResolve((to, from, next) => {console.log('全局解析守卫：', to.path);next();
});
3.afterEach（全局后置守卫）
用于 记录访问路径、切换页面标题等，不会影响路由跳转。
router.afterEach((to, from) => {console.log('全局后置守卫：', to.path);document.title = to.meta.title || '默认标题';
});
(3) 路由独享守卫
作用于单个路由，只在进入该路由时触发。
const routes = [{ path: '/profile', component: Profile, beforeEnter: (to, from, next) => {console.log('路由独享守卫：进入 /profile');next();}}
];
(4) 组件内守卫
作用于某个组件，通常用于 数据加载、离开前确认。
1. beforeRouteEnter
进入组件前触发，不能访问 this，因为组件还没创建。
<script>
export default {beforeRouteEnter(to, from, next) {console.log('组件内守卫：进入前');next(vm => {console.log('组件创建后，访问 vm:', vm);});}
};
</script>
2. beforeRouteUpdate（Vue 2.2+）
当 路径相同但参数变化时触发，适用于 监听动态路由参数变化（如 /user/:id）。
<script>
export default {beforeRouteUpdate(to, from, next) {console.log('组件内守卫：更新前', to.params.id);this.loadUserData(to.params.id);next();}
};
</script>
3. beforeRouteLeave
离开组件前触发，通常用于 确认框。
<script>
export default {beforeRouteLeave(to, from, next) {const answer = window.confirm('确定要离开吗？');if (answer) {next();} else {next(false);}}
};
</script>
总结
| 守卫 | 作用 | 适用场景 |
|---|---|---|
beforeEach | 全局前置守卫 | 登录校验、全局数据预加载 |
beforeResolve | 全局解析守卫 | 组件内守卫执行前，确保异步数据加载完成 |
afterEach | 全局后置守卫 | 记录访问路径、修改页面标题 |
beforeEnter | 路由独享守卫 | 进入某个特定路由前检查 |
beforeRouteEnter | 组件内守卫（进入前） | 进入组件前获取数据（不能访问 this） |
beforeRouteUpdate | 组件内守卫（更新时） | 监听动态参数变化 |
beforeRouteLeave | 组件内守卫（离开时） | 页面离开前弹出确认框 |
7. 路由懒加载
const routes = [{ path: '/about', component: () => import('../views/About.vue') }
];
这样 About.vue 只有在访问 /about 时才会加载，提高首屏加载速度。
8. 路由模式
(1) hash 模式（默认模式）
hash 模式的 URL 以 # 开头，例如：
http://example.com/#/about
特点
✅ 无需后端配置，兼容性好。
❌ # 号对 SEO 不友好。
使用方式
Vue 2
const router = new VueRouter({mode: 'hash',routes
});
Vue 3
const router = createRouter({history: createWebHashHistory(),routes
});
(2) history 模式
history 模式使用 HTML5 History API，使 URL 看起来更干净，例如：
http://example.com/about
特点
✅ URL 结构清晰，没有 # 号，对 SEO 友好。
❌ 需要后端支持，否则刷新页面会 404。
使用方式
Vue 2
const router = new VueRouter({mode: 'history',routes
});
Vue 3
const router = createRouter({history: createWebHistory(),routes
});
后端配置（Nginx）
location / {try_files $uri /index.html;
}
如果使用 history 模式，一定要配置服务器，否则刷新时会返回 404。
(3)abstract 模式
abstract 模式不会在 URL 中展示路由信息，适用于 无浏览器环境（如 SSR）。
特点
✅ 适用于服务器端渲染（SSR）或测试环境。
❌ 不能在普通浏览器中直接使用。
使用方式
Vue 2
const router = new VueRouter({mode: 'abstract',routes
});
Vue 3 不支持 abstract 模式，因为它主要用于 SSR，而 Vue 3 推荐使用 Nuxt.js 进行服务器端渲染。
| 模式 | 适用场景 | SEO 友好 | 需要服务器配置 | URL 形式 |
|---|---|---|---|---|
hash | 适用于所有浏览器 | ❌ | ❌ | http://example.com/#/about |
history | SEO 友好的 SPA | ✅ | ✅ | http://example.com/about |
abstract | SSR 或测试环境 | ❌ | ❌ | 不展示 URL |
在大多数情况下：
- 开发环境 推荐
hash，无需配置后端。 - 正式环境 推荐
history，但要配合服务器设置。 - SSR 环境 可能需要
abstract，但 Vue 3 一般使用 Nuxt 进行 SSR 处理。
9. 路由传参
(1) URL 传参
<router-link :to="'/user/' + userId">用户详情</router-link>
获取：
this.$route.params.id;
(2) Query 传参
<router-link :to="{ path: '/user', query: { id: 123 }}">用户详情</router-link>
获取：
this.$route.query.id;
(3) props 传参
在 router/index.js 中启用 props
const routes = [{ path: '/user/:id', component: User, props: true }
];
在 User.vue 组件中直接使用 props
<script>
export default {props: ['id']
};
</script>
10. keep-alive 保持组件状态
某些情况下，我们希望组件在切换时保持状态，而不是每次都重新加载。
<keep-alive><router-view></router-view>
</keep-alive>
这样，当用户切换回来时，组件不会重新创建，而是保留之前的状态。
