VueRouter API 参考 | 轻松掌握 Vue.js 路由

引言
VueRouter 是 Vue.js 官方的路由库，旨在帮助你构建单页应用程序 (SPA)。SPA 是指将整个应用程序放在一个 HTML 页面中，然后使用 JavaScript 来动态加载和切换不同的页面内容。VueRouter 通过提供一套丰富的 API，使你能够轻松实现 SPA 中的路由功能。

基本概念

路由

路由是应用程序中不同页面之间的链接。在 VueRouter 中，路由被定义为一个对象，包含以下属性：

• path ：路由的路径，即 URL 中的地址。
• component ：路由对应的组件，即当该路由被激活时显示的组件。
• children ：子路由，如果当前路由是一个父路由，则其下的子路由将作为其 children 属性。

路由器

路由器是管理路由和页面切换的中央枢纽。在 Vue.js 项目中，通常在入口文件中创建一个路由器实例，然后将其作为 Vue 实例的选项之一传入。

路由视图

路由视图是显示当前路由组件的容器。在 Vue.js 项目中，通常在模板中使用 <router-view> 组件来显示当前路由组件。

API 参考

1. 路由器实例方法

router.push(path)

将新的路由路径压入历史记录栈，并触发页面切换。

router.replace(path)

将新的路由路径替换当前历史记录栈顶的路由，并触发页面切换。

router.go(n)

在历史记录栈中前进或后退 n 步。

router.back()

后退一步历史记录。

router.forward()

前进一步历史记录。

2. 路由实例方法

route.path

返回当前路由的路径。

route.name

返回当前路由的名称（如果已定义）。

route.params

返回当前路由的参数对象。

route.query

返回当前路由的查询参数对象。

3. 路由组件选项

beforeRouteEnter(to, from, next)

在路由进入之前执行。

beforeRouteUpdate(to, from, next)

在路由更新之前执行。

beforeRouteLeave(to, from, next)

在路由离开之前执行。

使用指南

1. 安装 VueRouter

npm install vue-router

2. 创建路由器实例

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
})

3. 将路由器实例传入 Vue 实例

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

4. 在模板中使用路由视图

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

5. 使用路由链接导航到不同页面

<a href="/">Home</a>
<a href="/about">About</a>

结语

通过本文，你已经对 VueRouter 有了一个全面的了解，包括它的基本概念、API 参考和使用指南。现在，你可以开始使用 VueRouter 来构建自己的 SPA 了。希望本文对你有帮助。