Vue 详解VueRouter路由的实现方法和重点内容，倾情打造！

最新推荐文章于 2025-03-13 09:31:22 发布

Silly夏

最新推荐文章于 2025-03-13 09:31:22 发布

阅读量713

点赞数

分类专栏： Vue 文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/Sillydreamboy/article/details/118344819

版权

本文详细讲解VueRouter的实现模式，包括hash和history模式，以及路由的基本概念、原理。探讨了前端路由的实现，并介绍了vue-router的基本使用步骤，如配置路由规则、创建路由实例、挂载到Vue实例。还深入讨论了嵌套路由、动态路由匹配、命名路由、编程式导航和路由的钩子函数。同时，对比了$router和$route的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 Vue路由的实现模式

Vue的路由实现有hash模式、history 模式和abstract 模式。根据mode 参数来决定采用哪一种方式。

hash: 使用 URL hash 值来作路由。默认模式。
history: 依赖 HTML5 History API 和服务器配置。查看 HTML5 History 模式。
abstract: 支持所有 JavaScript 运行环境，如 Node.js 服务器端。

1.1 hash

即地址栏 URL 的#符号，特点：通过 window.onhashchange 的监听, 匹配不同的 url 路径，进行解析，加载不同的组件，然后动态的渲染出区域内的 html 内容，不会被包含在 HTTP 请求中,对后端完全没有影响

HashHistory 两个方法：

HashHistory.push（）是将路由添加到浏览器访问历史的栈顶
hashHistory.replace( ) 是替换掉当前栈顶的路由

因为hash 发生变化的url 都会被浏览器历史访问栈记录下来，这样一来，尽管浏览器没有请求服务器，但是页面状态和 url 一一关联起来的，浏览器还是可以进行前进后退的。

1.2 history

利用了 HTML5 History Interface 中新增的 pushState（）和 replaceState（）方法。这两个方法应用于浏览器的历史记录栈，提供了对历史记录的修改功能。history 模式不怕页面的前进和后腿，就怕刷新，当刷新时，如果服务器没有相应的响应或者资源，就会刷出 404，而hash 模式不会

Vue路由思维导图：

在这里插入图片描述

2 路由的基本概念与原理

2.1 后端路由

概念：根据不同的用户URL请求，返回不同的内容
本质：URL请求地址与服务器资源之间的相应关系。

2.2 前端路由

概念：根据不同的用户事件，显示不同的页面内容。
本质：用户事件与事件处理函数之间的对应关系

2.3 实现简易前端路由

基于URL中的hash实现。
监听window的onhashchange事件。

3 vue-router的基本使用

介绍：Vue Router是Vue.js官方的路由管理器。
Vue Router包含的功能
1. 支持HTML5的历史模式或hash模式
2. 支持嵌套路由
3. 支持路由参数
4. 支持编程式路由
5. 支持命名路由

3.1 基本使用步骤

引入相关的库文件
添加路由链接
添加路由填充位
定义路由组件
配置路由规则并创建路由实例
把路由挂载到Vue实例中

3.1.1 引入相关的库文件

导入vue文件，为全局window对象挂载Vue构造函数。
导入vue-router文件，为全局window对象挂载VueRouter构造函数。

vue文件必须在vue-router文件之前引入，顺序不能颠倒。

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

3.1.2 添加路由链接

router-link是vue中提供的标签，默认会被渲染为a标签。
to属性默认会被渲染为href属性。

to属性的值默认会被渲染为#开头的hash地址。

<router-link to="/user">user</router-link>
<router-link to="/register">register</router-link>

3.1.3 添加路由填充位

路由填充位（也叫做路由占位符）。
将来通过路由规则匹配到的组件，将会被渲染到router-view所在的位置。
```
<router-view></router-view>
```

3.1.4 定义路由组件

const user = {
   
    template:'<h1>User组件</h1>',
};
const register = {
   
    template:'<h1>Register组件</h1>',
};

3.1.5 配置路由规则并创建路由实例

创建路由VueRouter实例对象
创建路由规则（配置对象）数组routes。
- 每个路由规则都是一个配置对象，其中至少包含path和component两个属性；
- path表示当前路由规则匹配的hash地址；
- component表示当前路由规则对应要展示的组件。
```
const router = new VueRouter({
     
    // 路由规则
    routes:[
        {
     path:'/user',component:User},
        {
     path:'/register',component:Register},
    ]
})
```

3.1.6 把路由挂载到Vue实例中

为了能够让路由规则生效，必须把路由对象挂载到Vue实例对象上。

router等同于router:router，是其简写形式。

const app=new Vue({
     
    el:'#box',
    router,
});

3.1.7 完整示例

源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue的基本使用</title>
    <!-- 1、引入库文件 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
    <div id="box">
        <!-- 2、添加路由链接 -->
        <router-link to="/user">user</router-link>
        <router-link to="/register">register</router-link>
        <!-- 3、路由占位符 -->
        <router-view></router-view>
    </div>
    <script>
        // 4、定义路由组件
        const User = {
     
            template:'<h1>User组件</h1>',
        }
        const Register = {
     
            template:'<h1>Register组件</h1>',