从零开始搭建Vue项目(三)：深度剖析Router的使用

2024-01-21 16:33:23

前言

在构建单页面应用(SPA)时，路由无疑是必不可少的。它使我们能够在同一个页面中实现多个页面的功能，从而为用户提供更流畅、更无缝的体验。而Vue Router作为Vue.js官方推荐的路由解决方案，凭借其简洁的API和强大的功能，成为了众多开发者的首选。

什么是Router?

在深入探究Vue Router的使用之前，让我们先来了解一下什么是路由。路由本质上是一种机制，它允许我们根据不同的URL路径加载不同的组件或页面。在SPA中，所有的页面都被包含在一个单一的HTML文件中，当用户点击不同的链接时，路由器会动态地更新页面中的内容，而无需重新加载整个页面。这种方式不仅提高了页面的加载速度，同时也增强了用户体验。

怎么使用Router?

引入router

要使用Vue Router，我们首先需要在项目中引入它。可以使用以下命令进行安装：

npm install vue-router

安装完成后，在main.js文件中引入Vue Router并将其注册为Vue插件：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

创建router实例

接下来，我们需要创建一个router实例。router实例是一个包含路由规则和配置的对象。我们可以使用Vue Router提供的createRouter()方法来创建router实例：

const router = new VueRouter({
  routes: [
    // 路由规则
  ]
})

添加路由规则

路由规则是路由器用来匹配URL路径和组件的规则。我们可以使用routes选项来定义路由规则。每个路由规则包含以下几个属性：

path：要匹配的URL路径
component：要渲染的组件
name：路由的名称（可选）

例如，我们可以添加以下路由规则：

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

配置router

除了添加路由规则外，我们还可以配置router的其他选项。例如，我们可以配置router的base选项来指定路由的前缀。如果我们的项目部署在子路径上，则需要使用此选项来告诉router。

const router = new VueRouter({
  // ...
  base: '/my-app'
})

使用router

创建好router实例后，就可以在Vue组件中使用它了。我们可以使用router-link组件来创建导航链接，并使用router-view组件来显示当前激活的组件。

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