StarBlog博客Vue前端开发笔记：(2)页面路由

前言

Vue.js 使用虚拟 DOM 处理单页面，然后使用 Webpack 打包。通过上一篇文章的例子，读者也许已经发现，无论语法和写法如何不同，Vue.js 程序打包后都是一个单一的 HTML 文件，同时会引入一个标准的 JavaScript 文件。

Vue.js 中编写的所有代码都被 Webpack 自动打包成可以被浏览器解析的 HTML 和 JavaScript 代码，并且项目本身就只有一个页面。这意味着所有的用户对服务器发出进入页面的请求时，只会对服务器发出一次请求。

传统的 HTML 网页应用如果进行页面跳转，会根据网页地址（URL）来刷新页面，在网速极大提高的今天，这类跳转仍会不可避免地出现“白屏”现象，这显然不是 Vue.js 单页面应用想要的效果。而应用本身又需要 URL 来控制页面，在这种情况下，Vue.js 提供了 vue-router 来实现页面跳转。

本文内容

本文只是对 vue-router 有个初步的了解，后续的文章中会有更深入的使用

vue-router 介绍
两种路由模式以及实现原理
编写三个简单的 vue 页面
vue-router 的安装与配置
测试与验证

关于 vue-router

本项目使用的 vue-router 版本是 3.x，官方文档: https://v3.router.vuejs.org/zh/

Vue Router 是官方为 Vue.js 提供的路由管理器，它与 Vue.js 深度集成，让开发者能够轻松构建单页面应用。

通过 Vue Router，可以使用基于组件的方式定义路由，以实现灵活的页面结构和嵌套视图组织。

它的主要功能包括：

灵活的路由定义：支持嵌套路由、通过 URL 参数与查询字符串传递数据，以及使用通配符实现动态匹配。
简洁的组件化配置：将路由与组件有机结合，更好地组织项目结构。
多种模式选择：在现代浏览器下可以使用历史模式，为用户带来更佳的 URL 体验；在不支持的环境中则自动降级为哈希模式。
平滑的过渡动画：与 Vue 的过渡系统集成，可以轻松实现页面切换时的流畅过渡动画。
细粒度的导航控制：通过导航守卫，你可以在路由切换前后进行权限检查、数据预加载等逻辑处理。
个性化体验：包括可自定义的滚动行为，以及在活跃链接上自动添加 CSS 类，为用户提供更好的交互与界面反馈。

URL 模式

vue-router 有两种模式模拟 URL：hash 模式和 history 模式。（本项目使用默认的 hash 模式）

hash 模式是默认模式，使用网页的 URL 模拟一个完整的 URL，当 # 后的哈希值发生变化时，重新获取 hash 对应的页面（在 Vue.js 中是需要显示的组件），并将这些内容显示在页面中。
history 模式针对的是支持 HTML 5 新特性 history 的浏览器，其本身就是用户访问页面时浏览记录的堆栈，HTML 5 允许操作 history 栈中的内容。

PS：无论采用何种方式配置 vue-router，Vue.js 单页面应用都不会刷新页面。

实现方式的区别

hash 模式的实现是通过 history.pushState() 跳转路由；通过 hashchange event 监听路由变化。
history 模式通过 history.pushState 和 history.replaceState 改变 URL；通过 popstate event 监听路由变化，但无法监听到 history.pushState() 时的路由变化。

体验上的区别

hash 只能改变#后的值，而 history 模式可以随意设置同源 url；
hash 只能添加字符串类的数据，而 history 可以通过 API 添加多种类型的数据；
hash 无需后端配置且兼容性好，而 history 需要配置 index.html 用于匹配不到资源的情况；
hash 的历史记录只显示之前的 www.a.com 而不会显示 hash 值，而 history 的每条记录都会进入到历史记录（在 Chrome102 版本之后，hash 模式的完整 URL 也会加入浏览器的历史记录了）

添加页面

先回顾一下我们的项目目录结构

starblog-admin-ui

├── build

├── config

├── node_modules

├── src

│   ├── assets

│   ├── router

│   ├── components

│   ├── App.vue

│   └── main.js

├── static

├── test

├── README.md

├── index.html

├── package.json

└── yarn.lock

现在我要把 src/components 这个目录改成 views

然后在里面分别添加三个页面

Login.vue
Home.vue
404.vue

主页面

Home.vue 代码

<template>

  <el-alert

    title="主页"

    type="success">

  </el-alert>

</template>

<script>

export default {

  name: "Home"

}

</script>

<style scoped>

</style>

登录页面

然后是 Login.vue 的

<template>

  <el-alert

    title="登录"

    type="info">

  </el-alert>

</template>

404 页面

还有 404.vue 的

<template>

  <el-alert

    title="未找到"

    type="error">

  </el-alert>

</template>

这时控制台应该会报错了，不过问题不大，先来配置路由

安装和配置

之前我们在使用 vue-cli 创建项目的时候选择了使用 vue-router，所以不需要安装了。

如果没有的话，需要手动安装进去（本项目使用的 vue-router 版本是 3.x，现在最新版已经是 4.x 了，安装的时候请注意选择对应的版本）

yarn add vue-router

然后在 src 目录下新建一个 router 目录，里面再新建个 index.js，代码如下

import Vue from 'vue'

import Router from 'vue-router'

import Login from "@/views/Login";

import Home from "@/views/Home";

import NotFound from '@/views/404'

Vue.use(Router)

export default new Router({

  mode: 'history',		// 这里可以设置模拟URL的模式

  routes: [

    {

      path: '/',

      name: 'Home',

      component: Home,

    },

    {

      path: '/Login',

      name: 'Login',

      component: Login

    },

    {

      path: '/404',

      name: 'NotFound',

      component: NotFound

    },

  ]

})

这里面有个 mode 设置，就是前面提到的两种模式模拟 URL，如果设置了 history，这样跳转页面的时候，浏览器的地址栏里面就是这个形式：

localhost:8080/login
localhost:8080/404

用默认的 hash 模式的话，就是这样：

localhost:8080/#/login
localhost:8080/#/404

都差不多，不过 history 模式好看一点，不过要 支持 HTML5 新特性 history 的浏览器，并且还需要在后端做一些配置 才可以实现~

测试页面

分别打开以下地址：

http://localhost:8080/#/
http://localhost:8080/#/Login
http://localhost:8080/#/404

可以看到不同的信息就说明这一步完成了

老规矩，不贴图哈哈哈

收工~