前言

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

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

老规矩，不贴图哈哈哈 。

收工~ 。

最后此篇关于StarBlog博客Vue前端开发笔记：(2)页面路由的文章就讲到这里了,如果你想了解更多关于StarBlog博客Vue前端开发笔记：(2)页面路由的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。