Vue Router 入门指南：基础配置、路由守卫与动态路由

Vue Router 入门指南：基础配置、路由守卫与动态路由

简介：
Vue Router 是 Vue.js 官方的路由管理工具，用于在 Vue 应用中实现页面导航。掌握 Vue Router 的基本配置、路由守卫以及动态路由和懒加载是构建复杂 Vue 应用的基础。本文将详细介绍 Vue Router 的核心概念，并提供 Vue 2 和 Vue 3 的示例代码，帮助你快速上手。

目标：
本文旨在帮助读者理解和掌握 Vue Router 的基本用法，包括如何配置路由、使用路由守卫和导航钩子，以及如何实现动态路由和懒加载。通过对比 Vue 2 和 Vue 3 的示例，读者将能够灵活地在不同版本的 Vue 应用中应用这些技术。

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 基本使用的文章对你有所帮助。如果有其他需要调整或补充的地方，请告诉我！