Vue Router 4 入门指南：快速上手动态路由与导航守卫

Vue Router 是 Vue.js 的官方路由管理器，用于处理 Vue 应用的页面导航、URL 管理和 UI 切换。Vue Router 4 版本引入了一系列新特性与优化，旨在提升应用的性能和易用性。相比于之前的版本，Vue Router 4 更加简洁、高效，同时提供了更多优化选项。

要在新的 Vue.js 项目中快速安装并配置 Vue Router 4，首先需要确保你的项目已经使用了 Vue CLI 进行初始化。如果你尚未创建项目，你可以从 Vue 官网下载并使用 Vue CLI 创建一个新项目。一旦项目创建好，通过在终端使用命令：

vue create my-project
cd my-project

确保项目已经设置好并运行，接下来在 my-project 目录中，通过运行以下命令安装 Vue Router：

npm install vue-router

然后在 src 目录下的 main.js 文件中引入并配置 Vue Router：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = new VueRouter({
  routes
})

new Vue({
  router
}).$mount('#app')

在 Vue Router 中定义路由非常简单，只需在 main.js 中设置路由规则即可。上面的代码示例定义了两个基本路由：Home 和 About。当用户访问 / 时，应用会显示 Home 组件；当访问 /about 时，则显示 About 组件。

创建动态路径

动态路由允许你在路径中包含变量，这些变量在导航时会被解析并关联到组件中。例如，你可以创建一个显示特定用户详情的路由：

const routes = [
  //...
  {
    path: '/user/:id',
    name: 'User',
    component: UserComponent,
    props: true
  }
]

这里的 :id 是动态参数，可以接收从 URL 中传入的任何值。通过 props: true，动态参数会被传递给 UserComponent 组件。

解析参数并使用动态路由

在组件中，你可以通过接收 this.$route.params.id 来访问动态参数的值：

export default {
  created() {
    console.log('User ID:', this.$route.params.id);
  }
}

导航守卫是 Vue Router 的一个重要特性，它们允许你控制导航行为，包括检查权限、重定向未登录用户等。

全局导航守卫

全局导航守卫在所有组件之前执行，可以应用于各个路由：

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!this.$store.getters.isLoggedIn) {
      // 用户未登录，重定向到登录页面
      next({ path: '/login' });
    } else {
      // 用户已登录，继续导航到目标页面
      next();
    }
  } else {
    // 无需权限控制的页面，直接导航
    next();
  }
});

组件内导航守卫

组件可以直接使用 beforeRouteEnter, beforeRouteUpdate, 和 beforeRouteLeave 这三种导航守卫。

export default {
  beforeRouteEnter(to, from, next) {
    // 在路由被激活前执行的钩子
    next(vm => {
      // 在这里可以执行一些初始化操作
    });
  }
}

懒加载

懒加载是 Vue Router 的一个重要优化点，它允许你只在需要时加载组件，从而减少应用的启动时间与内存消耗。

const routes = [
  //...
  {
    path: '/lazy',
    name: 'Lazy',
    component: () => import(/* webpackChunkName: "lazy" */ '../views/Lazy.vue')
  }
]

路由重定向

可以使用 redirect 和 redirects 属性来重定向特定路径到另一个路径。

const routes = [
  //...
  {
    path: '/redirect',
    redirect: '/new-location'
  },
  {
    path: '/redirect/:catchAll(.*)',
    redirect: '/404'
  }
]

这个指南覆盖了 Vue Router 4 的基本使用、动态路由、导航守卫、路由优化等内容。通过这些功能，你可以构建出高效、易用且安全的 Vue.js 应用。