当前位置：首页 > news >正文

10分钟带你了解前端Vue Router

news 来源：原创 2025/5/9 12:59:22

作者：CSDN-PleaSure乐事

欢迎大家阅读我的博客希望大家喜欢

使用环境：WebStorm

一、Vue Router 的基本概念

1.1 什么是 Vue Router？

1.2 Vue Router 的核心功能

二、Vue Router 的原理

2.1 路由模式

2.1.1 Hash 模式

2.1.2 History 模式

2.2 路由匹配原理

2.2.1 静态路由匹配

2.2.2 动态路由匹配

2.3 嵌套路由

2.4 导航守卫

2.4.1 全局守卫

2.4.2 路由独享守卫

2.4.3 组件内守卫

2.5 路由懒加载

三、Vue Router 的实现方式

3.1 安装与配置

3.2 路由视图与导航

3.3 动态路由与参数传递

3.4 嵌套路由的实现

3.5 导航守卫的应用

3.6 路由懒加载的实践

一、Vue Router 的基本概念

1.1 什么是 Vue Router？

Vue Router 是 Vue.js 的官方路由管理器，它与 Vue.js 核心深度集成，使得构建单页面应用变得轻而易举。Vue Router 允许开发者通过配置路由映射表来定义应用中的各个页面，并通过动态路由、嵌套路由等高级功能来满足复杂的应用需求。

1.2 Vue Router 的核心功能

路由映射：将 URL 路径映射到对应的组件。
动态路由：根据参数动态匹配路由。
嵌套路由：在路由中嵌套其他路由，实现复杂的页面结构。
导航守卫：在路由跳转前后执行特定的逻辑。
路由懒加载：按需加载路由组件，优化应用性能。

二、Vue Router 的原理

2.1 路由模式

Vue Router 支持两种路由模式：hash 模式和 history 模式。

2.1.1 Hash 模式

Hash 模式利用 URL 中的 hash（#）来实现路由。由于 hash 的变化不会导致浏览器向服务器发送请求，因此这种模式非常适合单页面应用。Vue Router 默认使用 hash 模式。

const router = new VueRouter({mode: 'hash',routes: [...]
});

2.1.2 History 模式

History 模式利用 HTML5 的 history.pushState API 来实现路由。这种模式下的 URL 更加简洁，没有 # 符号。然而，使用 history 模式需要服务器的支持，以避免在刷新页面时出现 404 错误。

const router = new VueRouter({mode: 'history',routes: [...]
});

2.2 路由匹配原理

Vue Router 通过路由配置表来匹配当前 URL 对应的组件。当 URL 发生变化时，Vue Router 会根据配置表中的路径规则进行匹配，并渲染相应的组件。

2.2.1 静态路由匹配

静态路由匹配是最简单的路由匹配方式。Vue Router 会根据配置表中的路径与当前 URL 进行精确匹配。

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

2.2.2 动态路由匹配

动态路由匹配允许在路径中使用动态参数。Vue Router 会将匹配到的参数传递给组件，以便组件可以根据参数进行渲染。

const routes = [{ path: '/user/:id', component: User }
];

在组件中，可以通过 this.$route.params.id 访问动态参数。

2.3 嵌套路由

嵌套路由允许在路由中嵌套其他路由，从而实现复杂的页面结构。Vue Router 通过 children 属性来定义嵌套路由。

const routes = [{path: '/user',component: User,children: [{ path: 'profile', component: Profile },{ path: 'posts', component: Posts }]}
];

在父组件中，需要使用 <router-view> 来渲染子路由。

2.4 导航守卫

导航守卫是 Vue Router 提供的一种机制，允许开发者在路由跳转前后执行特定的逻辑。Vue Router 提供了多种导航守卫，包括全局守卫、路由独享守卫和组件内守卫。

2.4.1 全局守卫

全局守卫作用于所有路由跳转，包括 beforeEach、beforeResolve 和 afterEach。

router.beforeEach((to, from, next) => {// 在路由跳转前执行next();
});

2.4.2 路由独享守卫

路由独享守卫作用于特定的路由，包括 beforeEnter。

const routes = [{path: '/admin',component: Admin,beforeEnter: (to, from, next) => {// 在进入 /admin 路由前执行next();}}
];

2.4.3 组件内守卫

组件内守卫作用于特定的组件，包括 beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave。

export default {beforeRouteEnter(to, from, next) {// 在进入该组件前执行next();},beforeRouteUpdate(to, from, next) {// 在当前路由改变，但该组件被复用时执行next();},beforeRouteLeave(to, from, next) {// 在离开该组件前执行next();}
};

2.5 路由懒加载

路由懒加载是一种优化技术，它允许按需加载路由组件，从而减少应用的初始加载时间。Vue Router 支持通过动态 import 语法来实现路由懒加载。

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

三、Vue Router 的实现方式

3.1 安装与配置

Vue Router 可以通过 npm 或 yarn 进行安装。

npm install vue-router

在 Vue 项目中，可以通过以下方式配置 Vue Router。

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: '/home', component: Home },{ path: '/about', component: About }
];const router = new VueRouter({mode: 'history',routes
});export default router;

在 Vue 实例中，需要将 router 实例挂载到根实例上。

import Vue from 'vue';
import App from './App.vue';
import router from './router';new Vue({router,render: h => h(App)
}).$mount('#app');

3.2 路由视图与导航

在 Vue 组件中，可以使用 <router-view> 来渲染匹配到的组件，使用 <router-link> 来实现导航。

<template><div><router-link to="/home">Home</router-link><router-link to="/about">About</router-link><router-view></router-view></div>
</template>

3.3 动态路由与参数传递

动态路由允许在路径中使用动态参数，参数可以通过 this.$route.params 访问。

const routes = [{ path: '/user/:id', component: User }
];

在组件中，可以通过 this.$route.params.id 访问动态参数。

export default {mounted() {console.log(this.$route.params.id);}
};

3.4 嵌套路由的实现

嵌套路由通过 children 属性来定义，父组件中需要使用 <router-view> 来渲染子路由。

const routes = [{path: '/user',component: User,children: [{ path: 'profile', component: Profile },{ path: 'posts', component: Posts }]}
];

在父组件中，使用 <router-view> 渲染子路由。

<template><div><h1>User</h1><router-view></router-view></div>
</template>

3.5 导航守卫的应用

导航守卫可以在路由跳转前后执行特定的逻辑。例如，可以在全局守卫中进行权限验证。

router.beforeEach((to, from, next) => {if (to.path === '/admin' && !isAuthenticated()) {next('/login');} else {next();}
});

3.6 路由懒加载的实践

路由懒加载可以通过动态 import 语法来实现，从而优化应用的初始加载时间。

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

作者：CSDN-PleaSure乐事

希望我的博客对您有帮助，也希望在对您有帮助时您可以为我留下点赞收藏与关注，这对我真的很重要，谢谢！

一、Vue Router 的基本概念

1.1 什么是 Vue Router？

1.2 Vue Router 的核心功能

二、Vue Router 的原理

2.1 路由模式

2.1.1 Hash 模式

2.1.2 History 模式

2.2 路由匹配原理

2.2.1 静态路由匹配

2.2.2 动态路由匹配

2.3 嵌套路由

2.4 导航守卫

2.4.1 全局守卫

2.4.2 路由独享守卫

2.4.3 组件内守卫

2.5 路由懒加载

三、Vue Router 的实现方式

3.1 安装与配置

3.2 路由视图与导航

3.3 动态路由与参数传递

3.4 嵌套路由的实现

3.5 导航守卫的应用

3.6 路由懒加载的实践

相关文章：