Vue Router路由 - 技术栈

[1 路由](#1 路由)

[1.1 服务端路由](#1.1 服务端路由)

[1.2 客户端路由](#1.2 客户端路由)

[1.2.1 单页面应用（SPA）](#1.2.1 单页面应用（SPA）)

[1.2.2 多页面应用](#1.2.2 多页面应用)

[1.2.3 客户端路由](#1.2.3 客户端路由)

[2 Vue Router优缺点](#2 Vue Router优缺点)

[3 Vue Router使用](#3 Vue Router使用)

[3.1 创建项目选择Vue Router](#3.1 创建项目选择Vue Router)

[3.2 router/index.js](#3.2 router/index.js)

[3.2.1 结构介绍](#3.2.1 结构介绍)

[3.2.2 使用方式](#3.2.2 使用方式)

1 路由

路由是网络层概念，表示路由器从一个接口接收的数据包通过目的地址从另一个接口转发出去的过程。

而Vue中的路由是指URL和处理程序的映射关系，即Vue根据URL找了处理程序/组件的过程就是Vue中的路由。

1.1 服务端路由

发生在Web服务器端，当用户请求URL后，后端接口接收到请求后根据URL匹配对应的处理接口并返回HTML页面代码给客户端，即路由由服务器进行，并返回客户端HTML页面。

1.2 客户端路由

1.2.1 单页面应用（SPA）

只有一个主页面，点击链接时不创建新标签页，而是刷新主页面的部分组件。这种操作通常发生在后台管理系统，有多个组件，点击菜单栏，局部刷新页面，而无需加载整个页面，也无需打开新的标签页。

1.2.2 多页面应用

每次点击链接，打开并跳转一个新标签，浏览器加载一个新页面并加载页面的应用，这就是多页面应用。

1.2.3 客户端路由

客户端路由通常在单页面应用（SPA）中，当用户通过客户端访问不同的路径时，路由的映射函数会利用诸如History API事件这样的浏览器API来管理应用当前应该渲染的视图。这种方式的优点在于，它可以在不重新加载整个页面的情况下，根据用户的请求动态地加载和渲染新的数据或组件，从而带来更为顺滑的用户体验。

Vue Router正是Vue官方的客户端路由解决方案。

2 Vue Router优缺点

优点：

（1）用户体验更流畅：用户无需刷新页面或打开新的标签页，就可以成功动态渲染页面的内容，大大减少了等待页面加载的时间。

（2）更好的交互性和响应性：前端可以精细化控制页面变化，实现更丰富的交互效果和更快速的响应。

（3）更好的前后端分离：后端无需再返回HTML页面的内容，返回页面由前端来做，前端实现路由关系映射，从而可以单独开发、测试和部署前端。后端使用RESTful技术实现服务间调用，也可以单独开发、测试和部署后端。提高程序开发效率和可维护性。

缺点：

（1）初次加载时间长：SPA初次加载需要较多的JavaScript和CSS资源，因此加载时间较长，可能为用户带来不好的体验。

（2）SEO挑战：搜索引擎的爬虫可能无法对JavaScript动态生成的内容进行解析，因此会导致SPA在搜索引擎的排序处于较后的位置。通过服务器端渲染（SSR）或预渲染等技术可以部分解决这个问题。

3 Vue Router使用

3.1 创建项目选择Vue Router

也可以先创建项目，再通过如下命令安装，不过这种方式就需要手动添加router文件夹和路由相关代码：

复制代码

npm i vue-router -S

3.2 router/index.js

3.2.1 结构介绍

可以发现，创建的代码自带router/index.js、views/HomeView.vue和AboutView.vue文件：

Home页对应：

About页对应：

这都是通过点击页面的Home或About切换的，页面并没有全部刷新，也没有打开新的标签，仅改变了局部视图和URL。

3.2.2 使用方式

（1）在main.js中注册路由插件

javascript 复制代码

import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(router)

app.mount('#app')

（2）创建组件（.vue）

About组件（About页面）：

html 复制代码

<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>

<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
</style>

Home组件（Home页面），TheWelcome组件是创建示例项目自带的：

html 复制代码

<script setup>
import TheWelcome from '../components/TheWelcome.vue'
</script>

<template>
  <main>
    <TheWelcome />
  </main>
</template>

（3）App.vue根组件引入子组件

html 复制代码

<script setup>
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <header>
    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <HelloWorld msg="You did it!" />

      <nav>
        <RouterLink to="/">Home</RouterLink>
        <RouterLink to="/about">About</RouterLink>
      </nav>
    </div>
  </header>

  <RouterView />
</template>

<style scoped>
header {
  line-height: 1.5;
  max-height: 100vh;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

nav {
  width: 100%;
  font-size: 12px;
  text-align: center;
  margin-top: 2rem;
}

nav a.router-link-exact-active {
  color: var(--color-text);
}

nav a.router-link-exact-active:hover {
  background-color: transparent;
}

nav a {
  display: inline-block;
  padding: 0 1rem;
  border-left: 1px solid var(--color-border);
}

nav a:first-of-type {
  border: 0;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }

  nav {
    text-align: left;
    margin-left: -1rem;
    font-size: 1rem;

    padding: 1rem 0;
    margin-top: 1rem;
  }
}
</style>

RouterView和RouterLink组件是Vue Router插件的组件，因此可以直接使用：

RouterLink：生成可点击的链接，to属性就是链接的跳转地址（目标地址），点击该链接URL就会跳转到对应地址。

RouterView：占位组件，所在的位置可以根据路由状态动态的匹配需要渲染组件，比如如果此时URL变为/about，此时占位组件的位置就会被渲染为About页面的组件。即无论用户导航到哪里，该组件都会被渲染为与路由对应的组件。

（4）创建路由实例（router/index.js）

javascript 复制代码

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView,
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('../views/AboutView.vue'),
    },
  ],
})

export default router

使用createRouter()函数创建路由实例，该实例具有两个属性history和routes：

history属性：定义路由模式，createWebHistory()表示创建一个history模式的路由实例。该模式是基于HTML5的History API，允许开发者以编程方式操作浏览器的历史记录（路由信息存储在浏览器的历史记录）。该模式的URL特点是不带#。

routes属性：定义路由匹配规则列表，每个路由规则对象由{path、name、component}组成，path是路由URL，name是路由名称（用于编程式导航），component是路由对应的组件。

component在上面的代码声明了两种方式：一种是直接渲染本地组件HomeView，这种方式在页面初始化就会加载组件。另一种是通过函数动态导入渲染AboutView组件，这种方式是异步进行，在路由被访问到才会加载组件（因此提高页面初始化速度）。

export default router会导出路由实例router，以便在其它地方使用。