一文详解Vue Router的使用和路由守卫

2024-11-2 22:47| 发布者: 44f6fa4f5| 查看: 94| 评论: 0

摘要: 目次1 根本概念2 路由导航3 路由守卫4 动态路由和嵌套路由5 路由重定向和别名6 路由元信息7 路由懒加载Vue Router 是 Vue.js 的官方路由库，用于在 Vue 应用中实现单页面应用（SPA）的客户端路由。它使得 Vue 应用可

Vue Router 是 Vue.js 的官方路由库，用于在 Vue 应用中实现单页面应用（SPA）的客户端路由。它使得 Vue 应用可以或许在不重新加载页面的环境下实现不同的视图和状态切换。以下是 Vue Router 的详细介绍，包罗根本概念、设置、路由导航以及高级用法。

1 根本概念

路由 (Route): 路由是 URL 与 Vue 组件之间的映射关系。每个路由设置关联一个视图组件。

路由表 (Router Table): 路由表是一个数组，界说了路由的设置。每个路由设置项包罗路径、组件及其他参数。

路由实例 (Router Instance): 一个 Vue Router 实例，负责管理路由设置、导航和路由状态。

路由视图 (Router View): 一个 Vue 组件，作为路由组件的容器，渲染与当前路由匹配的组件。

- 安装

起首，安装 Vue Router：

[code]npm install vue-router [/code]

设置和使用

创建路由实例

创建一个 router/index.js 文件，界说路由设置并创建路由实例：

[code]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; [/code]

在 Vue 应用中使用路由

在 main.js 文件中导入路由实例，并将其传递给 Vue 应用：

[code]import { createApp } from 'vue'; import App from './App.vue'; import router from './router'; const app = createApp(App); app.use(router); app.mount('#app'); [/code]

使用路由视图

在应用的主组件 App.vue 中，使用组件来显示当前路由匹配的组件：

[code]<template> <div id="app"> <router-view></router-view> </div> </template> [/code]

2 路由导航

编程式导航

使用 Vue Router 提供的 router 实例进行编程式导航：

[code]// 在组件中 this.$router.push('/about'); // 或 this.$router.replace('/home'); [/code]

还可以使用 router 实例的 push 和 replace 方法：

[code]import { useRouter } from 'vue-router'; export default { setup() { const router = useRouter(); function navigateToAbout() { router.push('/about'); } return { navigateToAbout }; } } [/code]

声明式导航

使用组件实现声明式导航：

[code]<template> <nav> <router-link to="/">Home</router-link> <router-link to="/about">About</router-link> </nav> </template> [/code]

3 路由守卫

路由守卫是 Vue Router 提供的一种功能，答应开发者在路由的进入、离开和变化过程中进行控制和处置处罚。通过使用路由守卫，可以在用户导航到不同的路由时执行特定的操作，例如验证用户权限、处置处罚数据加载等。Vue Router 提供了全局守卫、路由独享守卫和组件内守卫三种类型的守卫。

1. 全局守卫

全局守卫是在路由实例上界说的，实用于所有的路由。它们在路由变化时被调用。

beforeEach: 在路由导航开始之前调用，可以用于处置处罚路由访问权限等操作。

[code]router.beforeEach((to, from, next) => { console.log('Global beforeEach'); // 判断是否需要登录 if (to.meta.requiresAuth && !isAuthenticated()) { next('/login'); // 没有权限，重定向到登录页 } else { next(); // 答应导航 } }); [/code]

afterEach: 在路由导航结束之后调用，可以用于执行一些不影响导航的操作，例如记录日记。

[code]router.afterEach((to, from) => { console.log('Global afterEach'); // 可用于执行一些操作，例如更新页面标题 document.title = to.meta.title || 'Default Title'; }); [/code]

beforeResolve: 在路由解析完且所有组件内守卫和异步路由组件都已解析之后调用。适合进行需要在导航完成前进行的操作。

[code]router.beforeResolve((to, from, next) => { console.log('Global beforeResolve'); next(); }); [/code]

2. 路由独享守卫

路由独享守卫是设置在特定路由中的，只有在匹配到该路由时才会触发。

beforeEnter: 在路由进入之前调用，与全局 beforeEach 类似，但仅针对特定路由。

[code]const routes = [ { path: '/profile', component: Profile, beforeEnter: (to, from, next) => { console.log('Route beforeEnter'); if (to.meta.requiresAuth && !isAuthenticated()) { next('/login'); } else { next(); } } } ]; [/code]

3. 组件内守卫

组件内守卫是界说在 Vue 组件内部的，专用于该组件的路由守卫。

beforeRouteEnter: 在路由进入之前调用，此时组件实例尚未被创建。通过 next 函数获取组件实例。

[code]export default { name: 'Profile', beforeRouteEnter(to, from, next) { console.log('Component beforeRouteEnter'); // 可以获取到组件实例 next(vm => { console.log('Component instance:', vm); }); } } [/code]

beforeRouteUpdate: 当路由在同一个组件中变化时调用（例如在动态路由中），用于处置处罚更新。

[code]export default { name: 'Profile', beforeRouteUpdate(to, from, next) { console.log('Component beforeRouteUpdate'); // 处置处罚路由更新逻辑 next(); } } [/code]

beforeRouteLeave: 当离开当前路由时调用，用于处置处罚离开前的操作，例如确认对话框。

[code]export default { name: 'Profile', beforeRouteLeave(to, from, next) { console.log('Component beforeRouteLeave'); // 确认离开操作 if (confirm('Do you really want to leave?')) { next(); } else { next(false); // 取消导航 } } } [/code]

4 动态路由和嵌套路由

动态路由匹配

使用 : 来界说动态参数：

[code]const routes = [ { path: '/user/:id', component: User } ]; 在组件中通过 this.$route.params 访问动态参数： javascript export default { computed: { userId() { return this.$route.params.id; } } } [/code]

嵌套路由

在路由设置中界说嵌套路径：

[code]const routes = [ { path: '/profile', component: Profile, children: [ { path: 'settings', component: ProfileSettings } ] } ]; [/code]

在 Profile 组件中使用显示子路由组件：

[code]<template> <div> <h2>Profile</h2> <router-view></router-view> </div> </template> [/code]

5 路由重定向和别名

重定向

路由重定向用于将访问某一起径的请求自动转发到另一起径。这对于简化 URL 或引导用户到正确的页面非常有用。

示例

假设你渴望将根路径 (/) 重定向到 /home：

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

当用户访问根路径时，他们会被自动重定向到 /home。

别名

路由别名答应你为一个路由设置多个路径。使用别名可以提供不同的 URL 路径来访问类似的页面。

示例假设你有一个 UserProfile 组件，且渴望通过两个不同的路径访问它：

[code]const routes = [ { path: '/user/:id', component: UserProfile, alias: '/profile/:id' // 使用别名 } ]; [/code]

在这个示例中，访问 /user/123 和 /profile/123 都会渲染 UserProfile 组件。

6 路由元信息

路由元信息是用来存储与路由相干的自界说数据或信息的一个功能。这些信息不会直接影响路由的匹配，但可以用来在组件中进行条件渲染、权限控制等操作。

怎样使用路由元信息

1. 界说元信息

在界说路由时，可以通过 meta 属性来添加元信息。例如：

[code]const routes = [ { path: '/admin', component: Admin, meta: { requiresAuth: true, title: 'Admin Page' } }, { path: '/public', component: Public, meta: { title: 'Public Page' } } ]; [/code]

2. 访问元信息

在组件中，可以通过 this.$route.meta 访问这些元信息。例如：

[code]export default { name: 'MyComponent', computed: { pageTitle() { return this.$route.meta.title || 'Default Title'; } } }; [/code]

3. 使用元信息进行路由守卫

可以在全局守卫、路由守卫中使用元信息来控制访问权限或进行其他操作。例如：

[code]router.beforeEach((to, from, next) => { if (to.meta.requiresAuth && !isLoggedIn()) { next('/login'); } else { next(); } }); [/code]

7 路由懒加载

路由懒加载是一种优化计谋，用于减少初始加载时间和提高应用性能。通过将路由组件按需加载，而不是一次性加载所有组件，可以加快应用的响应速率和启动时间。

使用动态导入

使用 import() 函数来实现动态导入组件。在 Vue Router 中，可以将路由组件设置为懒加载的形式：

[code]{ name: 'information', path: '/information', component: () => import('@/view/app/information/Main') }, [/code]

路由懒加载的利益

减少初始加载时间：只有在用户访问特定路由时，相干的组件才会被加载。
提高应用性能：减轻主线程负担，提升用户体验。
按需加载：根据用户的导航举动加载所需的组件，优化资源使用。

结论

Vue Router 提供了丰富的功能来管理 Vue 应用中的路由。通过灵活设置路由、使用导航守卫、动态路由以及嵌套路由等功能，可以创建功能强大且用户体验良好的单页面应用。

来源：https://www.jb51.net/javascript/326679fo1.htm
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

收藏分享邀请

上一篇：vue修改props数据报错的问题及解决下一篇：vue怎样优雅的利用全局WebSocket

账号		自动登录	找回密码
密码			立即注册