初学 Vue-Router 教程总结-JavaScript中文网-JavaScript教程资源分享门户

Vue-Router 是 Vue.js 官方的路由管理器，它可以帮助我们管理应用中的路由，实现单页应用（Single Page Application，SPA）和多页应用（Multiple Page Application，MPA）。Vue-Router 使用简单，但是它的功能强大，本文将对初学者入门 Vue-Router 的过程进行总结。我们将会主要从如下几个方面来讨论：

Vue-Router 的安装和基础使用
Vue-Router 传参方式及其区别
Vue-Route 路由守卫实现身份验证
Vue-Router 在实践中的应用

Vue-Router 的安装和基础使用

在使用 Vue-Router 前，我们需要先安装它。我们可以通过以下命令行来安装它。

npm i vue-router

使用 Vue-Router 的第一步是在应用中添加路由器。我们可以在 main.js 中添加以下代码：

-- -------------------- ---- -------
------ --- ---- -----
------ --------- ---- ------------
------ --- ---- -----------

------------------

----- ------ - --- -----------
  ------- --- --- ---
--

--- -----
  -------
  ------- - -- ------
-----------------

这里我们导入 VueRouter，并调用 Vue.use() 方法将其作为 Vue 插件进行安装。之后，我们创建一个新的 VueRouter 实例，将它们传递给 Vue 实例的 router 选项。

在这里，得到了 router 对象后，我们可以配置 routes 属性，该属性是一个数组，包含所有的路由映射关系。以下是一个路由映射的例子：

const routes = [
  { path: '/home', component: Home },
  { path: '/about', component: About },
  { path: '/users/:userId', component: User } // 动态路由
]

这里我们定义了三个路由映射，分别映射到 /home、/about、/users/userId 路径，并且需要分别渲染 Home、About、User 组件。

在定义了路由映射之后，我们就可以在组件中使用 router-link 来创建链接，并且使用 router-view 来渲染组件了。

-- -------------------- ---- -------
----------
  -----
    ------------ -----------------------------
    ------------ -------------------------------
    ------------ ------ ----- --------- - ------ ---------------------
    ---------------------------
  ------
-----------

--------
------ ------- -
  ------ -
    ------ -
      ------- ---
    -
  -
-
---------

在这里，我们在 template 中创建了三个 router-link，并通过 :to 属性来指定了跳转地址。在 User 路径中，我们使用了动态路由来实现传递 userId 的操作。

在组件中使用 router-view 可以让路由动态渲染，具体的渲染始终与当前的路由匹配。

Vue-Router 传参方式及其区别

Vue-Router 在传递参数时有几种不同的方式，接下来我们将分别介绍这些方法的区别。

路径参数

这是 Vue-Router 中常见的传参方式之一，通过匹配路由路径中的参数进行传递。在路由路径中可以通过 : 符号来定义路径参数，例如：

const routes = [
  { path: '/users/:userId', component: User }
]

在这里，我们定义了一个路径参数 userId，并将其传递给 User 组件。我们可以在组件中通过 $route.params 来获取路径参数。

<template>
  <div>{{ $route.params.userId }}</div>
</template>

查询参数

在 Vue-Router 中，我们还可以使用查询参数来传递数据。查询参数必须以 ? 的形式开始，并通过 & 连接不同的参数。例如：

<router-link :to="{ path: '/users', query: { userId: '1' } }">User</router-link>

在这里，我们将 userId 作为查询参数传递给 User 组件。在组件中，我们可以通过 $route.query 来获取查询参数。

<template>
  <div>{{ $route.query.userId }}</div>
</template>

状态参数

状态参数是一种相对来说比较少见的传参方式，但是它们也是非常好用的。我们可以通过 $router.push 方法来传递状态参数。

this.$router.push({ path: '/users', state: { userId: '1' } })

在路由跳转时，我们附加了一个状态对象，该状态可以在目标路由组件中通过 $route.meta 来获取。

<template>
  <div>{{ $route.meta.userId }}</div>
</template>

需要注意的是，使用状态对象来传递参数时，目标路由必须是通过命名路由定义的。

路由属性

最后一种传参方式是路由属性，这种方式类似于状态参数，但是不同之处在于路由属性通常只有目标路由才能访问。我们可以按以下方式定义路由属性。

const routes = [
  { path: '/users/:userId', component: User, props: {
    title: '用户信息',
    color: 'red'
  } }
]

在这里，我们将 title 和 color 作为路由属性传递给 User 组件，并通过 props 属性来定义。

在目标路由组件中使用 props 来接收路由属性，并进行组件中使用。

-- -------------------- ---- -------
----------
  ---- ------------ --------- ------ ------------ ---
    ------ ------------ -------
    ----- -------------------- ------
  ------
-----------

--------
------ ------- -
  ------ --------- --------
-
---------

在这里，我们在 User 组件中定义了两个 props，并使用 $props 来访问它们。

需要注意的是，使用路由属性时，我们需要将路由属性声明为组件的 props 中，否则无法正确访问和使用。

Vue-Route 路由守卫实现身份验证

在实际开发中，我们常常需要对某些页面进行身份验证，这时候就需要使用路由守卫来进行认证。路由守卫有三种类型：全局守卫、路由守卫和组件守卫。

全局守卫

全局守卫可以应用到整个应用程序中，例如对于所有页面都需要进行身份验证的情况。

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

在这里，我们使用 beforeEach 函数来设置全局守卫，它会在路由切换前被调用。在守卫中，我们检查用户是否已经被认证，如果没有认证，我们跳转到登录页。否则，我们调用 next() 来继续进行路由跳转。

路由守卫

路由守卫只应用于特定的路由，它可以通过路由配置对象的 beforeEnter 方法来进行设置。

-- -------------------- ---- -------
----- ------ - -
  -
    ----- -----------------
    ---------- -----
    ------------ ---- ----- ----- -- -
      -- -------------------- -
        --------------
      - ---- -
        ------
      -
    -
  -
-

在这里，我们在路由配置对象中设置了 beforeEnter 方法，它在路由切换前被调用。我们还是使用了 isAuthenticated() 的方法进行身份验证。

组件守卫

组件守卫用于特定组件内的路由，实现方式与路由守卫类似，但是需要在目标组件内进行设置。

-- -------------------- ---- -------
------ ------- -
  ----- -------
  --------- -
    ---------------------------- ----- ----- -- -
      -- -------------------- -
        --------------
      - ---- -
        ------
      -
    --
  -
-

在这里，我们使用了 created 方法来在组件内设置路由守卫，这里也是使用了 isAuthenticated() 来进行认证。

Vue-Router 在实践中的应用

Vue-Router 的使用有多种，这里我们将讨论几个使用场景。

嵌套路由

在 Vue-Router 中，我们可以创建嵌套路由来对应复杂的页面结构。

-- -------------------- ---- -------
----- ------ - -
  -
    ----- ----
    ---------- -----
    --------- -
      - ----- --- ---------- --------- --
      - ----- -------- ---------- --------- --
      - ----- ---------------- ---------- ---- -
    -
  -
-

在这里，我们定义了一个嵌套路由。在 / 路径下，我们定义了一个 Home 组件，并且在 children 中再定义了三个路由映射，分别是 Dashboard、UsersList 和 User。

按需加载

在实际应用中，我们常常需要对页面进行按需加载，减轻初始的加载负担。这时候，常常会使用异步组件来实现。

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

在这里，我们使用了 import 语句来加载 Home.vue 组件。通过这种方式，组件只在需要时进行加载，提高了应用的性能。

路由切换动画

Vue-Router 还提供了多种方法来处理路由切换动画。我们可以通过设置不同的 CSS 类来实现不同的过渡效果。

.fade-enter-active,
.fade-leave-active {
  transition: opacity .5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}

在这里，我们定义了两组 CSS 类，它们分别是 fade-enter-active 和 fade-leave-active，以及 fade-enter 和 fade-leave-to。通过这些类名，我们可以实现页面淡入淡出的效果。

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

在这里，我们使用了 Vue 的过渡组件 transition。它包裹着 router-view，可以在路由切换时，添加不同的 CSS 类名，从而实现不同的过渡效果。

总结

Vue-Router 是 Vue.js 的一个核心插件，它可以帮助我们轻松管理我们的页面路由。在本文中，我们从安装和基本使用，参数传递方式及其区别，路由守卫实现身份验证，实践中Vue-Router的应用等方面，讨论了 Vue Router 的一些重要概念和技术细节。希望这篇文章对初学者能够提升学习效率，对有一定经验的开发者也能够有所启示。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6469aa82968c7c53b0984e81