Vue Route 怎么使用及嵌套路由

目录

1. 引言
2. Vue Router 简介
3. 安装与配置
4. 基本路由配置
5. 动态路由匹配
6. 嵌套路由
7. 编程式导航
8. 路由守卫
9. 路由元信息
10. 路由懒加载
11. 路由过渡效果
12. 总结

引言

在现代前端开发中，单页应用（SPA）已经成为主流。Vue.js 作为一款流行的前端框架，提供了强大的路由管理工具——Vue Router。Vue Router 不仅能够帮助我们管理页面之间的跳转，还能实现复杂的路由嵌套、路由守卫等功能。本文将详细介绍 Vue Router 的使用方法，特别是嵌套路由的实现。

Vue Router 简介

Vue Router 是 Vue.js 官方的路由管理器。它与 Vue.js 核心深度集成，使得构建单页应用变得轻而易举。Vue Router 提供了以下功能：

• 嵌套路由
• 模块化的路由配置
• 路由参数、查询、通配符
• 基于 Vue.js 过渡系统的视图过渡效果
• 细粒度的导航控制
• 带有自动激活的 CSS 类的链接
• HTML5 history 模式或 hash 模式
• 可定制的滚动行为

安装与配置

安装

在使用 Vue Router 之前，首先需要安装它。可以通过 npm 或 yarn 进行安装：

npm install vue-router

或

yarn add vue-router

配置

安装完成后，需要在 Vue 项目中配置 Vue Router。通常，我们会在 src/router/index.js 文件中进行配置：

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: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/about',
    name: 'About',
    component: About,
  },
];

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

export default router;

在上述代码中，我们首先引入了 Vue 和 VueRouter，然后通过 Vue.use(VueRouter) 来启用 Vue Router。接着，我们定义了一个路由数组 routes，其中包含了两个路由：Home 和 About。最后，我们创建了一个 VueRouter 实例，并将其导出。

基本路由配置

路由定义

在 Vue Router 中，路由是通过 routes 数组来定义的。每个路由对象包含以下属性：

• path: 路由的路径
• name: 路由的名称（可选）
• component: 路由对应的组件

例如：

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

路由视图

在 Vue 组件中，我们使用 <router-view> 标签来渲染匹配到的路由组件。例如：

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

路由链接

在 Vue 组件中，我们使用 <router-link> 标签来创建导航链接。例如：

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

动态路由匹配

在实际开发中，我们经常需要根据不同的参数来动态匹配路由。Vue Router 提供了动态路由匹配的功能。

动态路径参数

我们可以通过在路由路径中使用 : 来定义动态路径参数。例如：

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

在上述代码中，id 是一个动态路径参数。当用户访问 /user/123 时，123 会被传递给 User 组件。

获取动态参数

在组件中，我们可以通过 this.$route.params 来获取动态路径参数。例如：

export default {
  name: 'User',
  created() {
    console.log(this.$route.params.id); // 输出 123
  },
};

响应路由参数的变化

当路由参数发生变化时，组件并不会重新创建。为了响应路由参数的变化，我们可以使用 watch 监听 $route 对象的变化：

export default {
  name: 'User',
  watch: {
    '$route.params.id'(newId) {
      console.log(newId);
    },
  },
};

嵌套路由

在实际开发中，我们经常需要在一个页面中嵌套多个子页面。Vue Router 提供了嵌套路由的功能。

定义嵌套路由

在路由配置中，我们可以通过 children 属性来定义嵌套路由。例如：

const routes = [
  {
    path: '/user/:id',
    component: User,
    children: [
      {
        path: 'profile',
        component: UserProfile,
      },
      {
        path: 'posts',
        component: UserPosts,
      },
    ],
  },
];

在上述代码中，User 组件中包含了两个子路由：UserProfile 和 UserPosts。

渲染嵌套路由

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

<template>
  <div>
    <h2>User {{ $route.params.id }}</h2>
    <router-view></router-view>
  </div>
</template>

嵌套路由的路径

嵌套路由的路径是相对于父路由的路径的。例如，/user/123/profile 对应的路径是 /profile，而不是 /user/123/profile。

编程式导航

除了使用 <router-link> 进行导航外，我们还可以通过编程式导航来实现页面跳转。

router.push

router.push 方法用于导航到一个新的路由。例如：

this.$router.push('/about');

router.push 方法还可以接受一个对象作为参数：

this.$router.push({ name: 'About' });

router.replace

router.replace 方法与 router.push 类似，但它不会在浏览器历史记录中留下记录。例如：

this.$router.replace('/about');

router.go

router.go 方法用于在浏览器历史记录中前进或后退。例如：

this.$router.go(-1); // 后退一步
this.$router.go(1); // 前进一步

路由守卫

路由守卫是 Vue Router 提供的一种机制，用于在路由导航过程中进行控制。常见的路由守卫包括全局守卫、路由独享守卫和组件内守卫。

全局前置守卫

全局前置守卫通过 router.beforeEach 方法进行定义。例如：

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

在上述代码中，我们检查用户是否已经登录。如果用户未登录且尝试访问 /admin 路径，则重定向到 /login 路径。

全局后置钩子

全局后置钩子通过 router.afterEach 方法进行定义。例如：

router.afterEach((to, from) => {
  console.log('导航完成');
});

路由独享守卫

路由独享守卫通过 beforeEnter 属性进行定义。例如：

const routes = [
  {
    path: '/admin',
    component: Admin,
    beforeEnter: (to, from, next) => {
      if (!isAuthenticated) {
        next('/login');
      } else {
        next();
      }
    },
  },
];

组件内守卫

组件内守卫包括 beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave。例如：

export default {
  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
    next();
  },
  beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
    next();
  },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
    next();
  },
};

路由元信息

路由元信息是通过 meta 属性来定义的。我们可以通过 meta 属性来存储一些与路由相关的信息。例如：

const routes = [
  {
    path: '/admin',
    component: Admin,
    meta: { requiresAuth: true },
  },
];

在路由守卫中，我们可以通过 to.meta 来访问路由元信息。例如：

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

路由懒加载

路由懒加载是一种优化技术，用于延迟加载路由组件。通过路由懒加载，我们可以减少应用的初始加载时间。

使用 import() 实现懒加载

我们可以使用 import() 函数来实现路由懒加载。例如：

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

在上述代码中，About 组件会在用户访问 /about 路径时才会被加载。

使用 webpackChunkName 指定 chunk 名称

我们可以使用 webpackChunkName 来指定生成的 chunk 名称。例如：

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

在上述代码中，About 组件会被打包到一个名为 about 的 chunk 中。

路由过渡效果

Vue Router 提供了与 Vue.js 过渡系统集成的功能，使得我们可以轻松地为路由切换添加过渡效果。

使用 <transition> 标签

我们可以使用 <transition> 标签来包裹 <router-view>，从而为路由切换添加过渡效果。例如：

<template>
  <div id="app">
    <transition name="fade">
      <router-view></router-view>
    </transition>
  </div>
</template>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

在上述代码中，我们为路由切换添加了一个淡入淡出的过渡效果。

使用 transition 属性

我们还可以在路由配置中使用 transition 属性来指定过渡效果。例如：

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    transition: 'fade',
  },
  {
    path: '/about',
    name: 'About',
    component: About,
    transition: 'slide',
  },
];

在上述代码中，我们为 Home 和 About 路由分别指定了不同的过渡效果。

总结

Vue Router 是 Vue.js 生态中非常重要的一部分，它为单页应用提供了强大的路由管理功能。通过本文的介绍，我们了解了 Vue Router 的基本使用方法，包括路由配置、动态路由匹配、嵌套路由、编程式导航、路由守卫、路由元信息、路由懒加载和路由过渡效果。希望本文能够帮助你更好地理解和使用 Vue Router，从而构建出更加复杂和高效的单页应用。