10分钟快速掌握 Vue.js 路由使用指南

引言

在现代 Web 开发中，单页面应用 (SPA) 因其流畅的用户体验和更快的页面加载速度而备受青睐。Vue.js 作为一款流行的前端框架，为构建 SPA 提供了强大的支持，而 vue-router 则是 Vue.js 官方推荐的路由库，能够轻松实现 SPA 的路由管理。本指南将带你快速入门 vue-router，仅需 10 分钟，你便能掌握其基本使用方法。

路由基础

路由是 SPA 的核心概念，它允许在同一页面上加载不同的组件或视图，而无需重新加载整个页面。Vue.js 中，路由管理由 vue-router 完成。

1. 安装 vue-router

npm install vue-router

2. 配置 vue-router

在 Vue.js 项目中，你需要在 main.js 文件中配置 vue-router：

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'

Vue.use(VueRouter)

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

const router = new VueRouter({
  routes
})

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

3. 导航到不同路由

在 Vue.js 组件中，你可以使用 $router 对象来导航到不同的路由：

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

Html 使用方法

1. 在 index.html 中添加 <router-view>

<router-view> 是一个特殊的 Vue 组件，它会渲染当前活动的路由组件。你需要在 index.html 中添加 <router-view>：

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

2. 创建路由组件

路由组件是用于显示不同页面的 Vue 组件。你需要创建两个路由组件，分别对应 / 和 /about 路由：

// Home.vue
<template>
  <h1>Home</h1>
</template>

// About.vue
<template>
  <h1>About</h1>
</template>

3. 将路由组件注册到 Vue 实例

你需要在 Vue 实例中注册路由组件：

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

Javascript 使用方法

1. 在 main.js 中配置路由

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

const router = new VueRouter({
  routes
})

2. 在 Vue 组件中使用 $router

你可以使用 $router 对象来导航到不同的路由：

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

3. 使用 <router-link> 组件

<router-link> 是一个特殊的 Vue 组件，它可以创建可点击的链接，当点击这些链接时，会导航到不同的路由。你可以使用 <router-link> 组件来创建导航栏：

<nav>
  <router-link to="/">Home</router-link>
  <router-link to="/about">About</router-link>
</nav>

总结

通过本指南，你已经快速入门了 Vue.js 路由的使用方法。现在，你可以开始构建自己的单页面应用了。祝你开发顺利！