Vue.js入门系列（二十七）：Vue Router简介与基本使用

Vue.js入门系列（二十七）：Vue Router简介与基本使用

引言

在现代前端开发中，构建单页应用（SPA）通常需要用到路由（Routing）功能。Vue.js 提供了一个官方的路由库 Vue Router，它可以帮助我们轻松地管理应用中的不同视图，使得单页应用能够像多页应用一样在用户之间切换视图而无需重新加载页面。在本文中，我们将介绍 Vue Router 的基础知识，探讨其基本使用方法、注意点、嵌套路由的实现方式，以及如何处理路由中的 query 参数。

一、路由简介

1.1 什么是路由？

在前端开发中，路由是指通过不同的 URL 来匹配相应的视图组件，从而实现不同页面之间的导航。对于单页应用，路由通过在客户端管理 URL 和组件的关系，模拟出多页面的导航效果。

1.2 Vue Router 的作用

Vue Router 是 Vue.js 的官方路由管理库，它帮助我们在 Vue.js 应用中轻松地实现视图的切换，并且支持以下功能：

• 动态路由匹配：根据 URL 的变化，动态地加载相应的组件。
• 嵌套路由：支持在一个路由视图内嵌套子视图。
• 路由守卫：在路由切换时执行一些逻辑，如权限验证或数据预加载。
• 路由参数：支持 URL 中传递参数，并在组件中获取。

二、路由的基本使用

2.1 安装 Vue Router

首先，你需要在 Vue.js 项目中安装 Vue Router：

npm install vue-router

2.2 创建基本路由

在 Vue.js 应用中，路由的定义通常包含在 router 文件中。首先，我们需要定义路由配置，然后将其挂载到 Vue 实例中。

// router.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';

Vue.use(VueRouter);

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

const router = new VueRouter({
  routes
});

export default router;

在这个例子中，我们定义了两个基本的路由：/ 对应 Home 组件，/about 对应 About 组件。

2.3 在 Vue 实例中使用路由

接下来，我们将路由集成到 Vue 实例中：

import Vue from 'vue';
import App from './App.vue';
import router from './router';

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

在 App.vue 中，使用 <router-view> 组件来显示匹配的路由组件：

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

<router-link> 用于创建导航链接，而 <router-view> 是显示匹配路由组件的位置。

三、几个注意点

3.1 使用命名路由

为了避免在大型应用中出现路径管理困难的情况，建议使用命名路由。命名路由允许我们使用 name 属性来标识路由，并在导航时使用路由名称而不是路径。

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

// 导航到名为 'about' 的路由
this.$router.push({ name: 'about' });

3.2 路由的重定向

在某些情况下，我们需要在用户访问某个路径时自动导航到另一个路径。可以通过 redirect 属性来实现：

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

在这个例子中，当用户访问 /home 时，将被重定向到 /。

3.3 路由的懒加载

在大型应用中，使用懒加载可以减少初始加载时间。Vue Router 支持通过 import() 实现路由组件的懒加载：

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

四、嵌套路由

4.1 什么是嵌套路由？

嵌套路由允许我们在一个路由中嵌套多个子路由。这在设计复杂布局或多层次导航时非常有用。

4.2 定义嵌套路由

假设我们有一个用户管理页面，其中包含用户列表和用户详情两个子页面。我们可以定义如下嵌套路由：

const routes = [
  {
    path: '/users',
    component: Users,
    children: [
      {
        path: '',
        component: UserList
      },
      {
        path: ':id',
        component: UserDetail
      }
    ]
  }
];

在 Users 组件中，我们使用 <router-view> 来显示嵌套路由的子组件：

<template>
  <div>
    <h2>Users</h2>
    <router-view></router-view>
  </div>
</template>

在这个例子中，当用户访问 /users 时，将显示 UserList 组件；当访问 /users/:id 时，将显示 UserDetail 组件。

五、路由的 query 参数

5.1 什么是 query 参数？

Query 参数是 URL 中以 ? 开头的部分，用于传递额外的信息，如筛选条件、分页信息等。Vue Router 支持通过 query 参数向路由组件传递数据。

5.2 传递和接收 query 参数

假设我们要在导航时传递一些筛选条件，可以这样做：

this.$router.push({ path: '/search', query: { q: 'Vue.js' } });

在目标组件中，可以通过 $route.query 来访问这些参数：

computed: {
  searchQuery() {
    return this.$route.query.q;
  }
}

5.3 动态处理 query 参数

Query 参数可以动态变化，我们可以在 watch 或计算属性中监听这些变化：

watch: {
  '$route.query.q'(newQuery) {
    this.performSearch(newQuery);
  }
}

六、总结

通过本文的学习，你应该掌握了以下关键点：

• 路由的基本概念：了解了路由在单页应用中的作用，并掌握了 Vue Router 的基本使用方法。
• 路由的配置与使用：学会了如何定义路由、使用 <router-link> 进行导航，以及通过 <router-view> 渲染对应的路由组件。
• 嵌套路由：理解了嵌套路由的概念，并学会了如何在 Vue.js 应用中实现多层次的路由嵌套。
• 路由的 query 参数：掌握了如何使用 query 参数在不同页面之间传递数据，并在组件中处理这些参数。

Vue Router 是 Vue.js 应用中必不可少的一部分，掌握其基本功能和使用技巧将大大提升开发效率。在接下来的博客中，我们将继续深入探讨 Vue Router 的高级特性和实际应用场景。如果你有任何疑问或需要进一步讨论，欢迎在评论区留言。感谢你的阅读，期待在下一篇博客中继续与大家分享更多 Vue.js 和 Vue Router 的开发技巧与经验！