Vue Router 入门指南：基础配置、路由守卫与动态路由
简介：
Vue Router 是 Vue.js 官方的路由管理工具，用于在 Vue 应用中实现页面导航。掌握 Vue Router 的基本配置、路由守卫以及动态路由和懒加载是构建复杂 Vue 应用的基础。本文将详细介绍 Vue Router 的核心概念，并提供 Vue 2 和 Vue 3 的示例代码，帮助你快速上手。
目标：
本文旨在帮助读者理解和掌握 Vue Router 的基本用法，包括如何配置路由、使用路由守卫和导航钩子，以及如何实现动态路由和懒加载。通过对比 Vue 2 和 Vue 3 的示例，读者将能够灵活地在不同版本的 Vue 应用中应用这些技术。
文章目录
- Vue Router 入门指南：基础配置、路由守卫与动态路由
- 1. 路由基础配置
- **1.1 Vue 2 示例代码**
- **1.2 Vue 3 示例代码**
- 2. 路由守卫与导航钩子
- **2.1 Vue 2 示例代码**
- **2.2 Vue 3 示例代码**
- 3. 动态路由与懒加载
- **3.1 Vue 2 示例代码**
- **3.2 Vue 3 示例代码**
- 总结
1. 路由基础配置
路由基础配置是使用 Vue Router 进行页面导航的第一步。配置路由包括定义路由规则和将这些规则应用到 Vue 实例中。
1.1 Vue 2 示例代码
安装 Vue Router
npm install vue-router
路由配置（router/index.js）
import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/components/Home.vue';
import About from '@/components/About.vue';
Vue.use(Router);
export default new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
}
]
});
主文件配置（main.js）
import Vue from 'vue';
import App from './App.vue';
import router from './router';
new Vue({
router,
render: h => h(App)
}).$mount('#app');
组件（Home.vue 和 About.vue）
Home.vue:
<template>
<div>
<h1>Home Page</h1>
</div>
</template>
<script>
export default {
name: 'Home'
};
</script>
About.vue:
<template>
<div>
<h1>About Page</h1>
</div>
</template>
<script>
export default {
name: 'About'
};
</script>
1.2 Vue 3 示例代码
安装 Vue Router
npm install vue-router
路由配置（router/index.js）
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../components/Home.vue';
import About from '../components/About.vue';
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
}
];
const router = createRouter({
history: createWebHistory(),
routes
});
export default router;
主文件配置（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');
组件（Home.vue 和 About.vue）
Home.vue:
<template>
<div>
<h1>Home Page</h1>
</div>
</template>
<script setup>
import { defineComponent } from 'vue';
export default defineComponent({
name: 'Home'
});
</script>
About.vue:
<template>
<div>
<h1>About Page</h1>
</div>
</template>
<script setup>
import { defineComponent } from 'vue';
export default defineComponent({
name: 'About'
});
</script>
2. 路由守卫与导航钩子
路由守卫用于在路由变化前、路由进入后或路由离开前进行一些操作，如权限检查、数据预取等。
2.1 Vue 2 示例代码
全局路由守卫
// router/index.js
import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/components/Home.vue';
import About from '@/components/About.vue';
Vue.use(Router);
const router = new Router({
mode: 'history',
routes: [
{ path: '/', name: 'Home', component: Home },
{ path: '/about', name: 'About', component: About }
]
});
// 路由守卫
router.beforeEach((to, from, next) => {
// 在这里可以进行权限检查
console.log(`导航到 ${to.path}`);
next(); // 必须调用 next() 方法来继续导航
});
export default router;
路由独享守卫
// About.vue
<template>
<div>
<h1>About Page</h1>
</div>
</template>
<script>
export default {
name: 'About',
beforeRouteEnter(to, from, next) {
// 在路由进入前调用
console.log('进入 About 页面');
next();
}
};
</script>
2.2 Vue 3 示例代码
全局路由守卫
// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../components/Home.vue';
import About from '../components/About.vue';
const routes = [
{ path: '/', name: 'Home', component: Home },
{ path: '/about', name: 'About', component: About }
];
const router = createRouter({
history: createWebHistory(),
routes
});
// 路由守卫
router.beforeEach((to, from, next) => {
// 在这里可以进行权限检查
console.log(`导航到 ${to.path}`);
next(); // 必须调用 next() 方法来继续导航
});
export default router;
路由独享守卫
<!-- About.vue -->
<template>
<div>
<h1>About Page</h1>
</div>
</template>
<script setup>
import { onBeforeRouteEnter } from 'vue-router';
onBeforeRouteEnter((to, from, next) => {
// 在路由进入前调用
console.log('进入 About 页面');
next();
});
</script>
3. 动态路由与懒加载
动态路由允许你根据路由参数显示不同的内容，懒加载可以提高应用性能，通过按需加载路由组件来减小初始包体积。
3.1 Vue 2 示例代码
动态路由配置
// router/index.js
import Vue from 'vue';
import Router from 'vue-router';
import User from '@/components/User.vue';
Vue.use(Router);
export default new Router({
mode: 'history',
routes: [
{
path: '/user/:id',
name: 'User',
component: User
}
]
});
组件（User.vue）
<template>
<div>
<h1>User {{ $route.params.id }}</h1>
</div>
</template>
<script>
export default {
name: 'User'
};
</script>
懒加载
// router/index.js
import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
export default new Router({
mode: 'history',
routes: [
{
path: '/user/:id',
name: 'User',
component: () => import('@/components/User.vue')
}
]
});
3.2 Vue 3 示例代码
动态路由配置
// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import User from '../components/User.vue';
const routes = [
{
path: '/user/:id',
name: 'User',
component: User
}
];
const router = createRouter({
history: createWebHistory(),
routes
});
export default router;
组件（User.vue）
<template>
<div>
<h1>User {{ $route.params.id }}</h1>
</div>
</template>
<script setup>
import { useRoute } from 'vue-router';
const route = useRoute();
</script>
懒加载
// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
const routes = [
{
path: '/user/:id',
name: 'User',
component: () => import('../components/User.vue')
}
];
const router = createRouter({
history: createWebHistory(),
routes
});
export default router;
总结
本文详细介绍了 Vue Router 的基础配置、路由守卫与导航钩子、动态路由与懒加载。在 Vue 2 和 Vue 3 中，这些技术的使用方式有所不同，但核心概念保持一致。通过掌握这些内容，你可以更高效地管理 Vue 应用中的页面导航，并提升应用的性能和用户体验。希望本文能帮助你在实际项目中更好地使用 Vue Router。
看到这里的小伙伴，欢迎 点赞👍评论📝收藏🌟
希望这篇关于 Vue Router 基本使用的文章对你有所帮助。如果有其他需要调整或补充的地方，请告诉我！
