Vue 3.0 Router 全面深入解析

小蓝 • 2024-12-26 13:14 • 编程

Vue 3.0 Router 是 Vue.js 官方的路由管理器，是实现 SPA（Single Page Application 单页应用）的关键之一。Vue Router 3.0 在性能上有着很大的优化，支持多个路由实例，可以实现更加灵活的路由配置，同时也支持动态路由、命名路由、路由组件懒加载等功能。接下来，我们将从多个方面对 Vue 3.0 Router 进行详细的阐述。

一、创建路由及基本配置

1、如何创建一个 Vue 3.0 Router 实例?

import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    }
  ]
});

2、路由配置中常用的属性说明:

path： 路由的路径
name： 路由的名称
component： 路由对应的组件
meta： 路由元信息，可用于存储一些额外的信息
redirect： 重定向到另一个路由
alias： 路由的别名
children： 嵌套子路由

3、如何使用路由?

默认情况下，路由可以在组件中通过 $router 访问，而当前路由信息可以通过 $route 访问，例如：

export default {
  methods: {
    goToAbout() {
      this.$router.push('/about');
    }
  }
};

二、路由导航守卫

路由导航守卫用于在路由跳转前后进行一些自定义的逻辑处理，Vue Router 3.0 提供了 3 种不同的导航守卫，即：

全局导航守卫
路由独享守卫
组件内的守卫

1、全局导航守卫

const router = createRouter({
  routes: [...]
});

router.beforeEach((to, from, next) => {
  // 在跳转前进行一些自定义的逻辑处理
  // 如果需要进行路由跳转，一定要调用 next() 方法
  next();
});

router.afterEach((to, from) => {
  // 在跳转后进行一些自定义的逻辑处理
});

2、路由独享守卫

在某个路由中使用独享守卫，例如：

{
  path: '/about',
  component: About,
  beforeEnter(to, from, next) {
    // 在跳转前进行一些自定义的逻辑处理
    next();
  }
}

3、组件内的守卫

在组件内通过 beforeRouteEnter, beforeRouteLeave, beforeRouteUpdate 等生命周期函数来定义组件内的导航守卫。

三、路由懒加载及动态路由

路由懒加载可以让我们在需要的时候才加载路由对应的组件，避免了一次性加载过多的资源。同时，Vue 3.0 Router 还支持动态路由的配置。

1、动态路由

动态路由是指路由路径中存在可变的部分，例如：

{
  path: '/user/:id',
  component: User
}

实现动态路由可以使用 $route.params 对象来获取当前路由参数，例如：

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

2、路由懒加载

使用路由懒加载可以在需要的时候才加载路由对应的组件，优化网页的加载速度。路由懒加载可以通过 import 函数来实现，例如：

{
  path: '/about',
  component: () => import('./views/About.vue')
}

四、命名路由及命名视图

命名路由和命名视图可以让我们在更加复杂的应用中方便地进行路由管理。

1、命名路由

通过给路由设置名称，可以实现更加方便的路由跳转，例如：

{
  path: '/user/:id',
  name: 'user',
  component: User
}

export default {
  methods: {
    goToUser() {
      this.$router.push({ name: 'user', params: { id: 123 } });
    }
  }
};

2、命名视图

在某些场景中，我们需要同时显示多个视图，例如页面布局中的头部、底部和侧边栏。这时，我们可以使用命名视图来实现。

<router-view name="header"></router-view>
<router-view></router-view>
<router-view name="sidebar"></router-view>

{
  path: '/user/:id',
  components: {
    default: User,
    header: Header,
    sidebar: Sidebar
  }
}

五、路由元信息

路由元信息可以在路由配置中添加一些额外的信息，例如：

{
  path: '/about',
  component: About,
  meta: {
    requiresAuth: true
  }
}

可以通过路由元信息来进行权限控制等操作。

六、总结

以上就是 Vue 3.0 Router 的全面深入解析，从创建路由、路由导航守卫、路由懒加载及动态路由、命名路由及命名视图、路由元信息等多个方面进行了阐述，希望对大家有所帮助。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/293310.html