Vue-router-CSDN博客

本文链接：https://blog.csdn.net/qq_40353662/article/details/114331144

一、路由阶段

1、后端路由阶段

后端路由：后端处理URL和页面之间的映射关系。
在这里插入图片描述

2、前后端分离阶段

后端只负责提供数据，不负责提供任何阶段的内容。
在这里插入图片描述

在这里插入图片描述

3、单页面富应用（SPA）阶段

即整个网页只有一个html页面。
在这里插入图片描述 前端路由的核心是什么？
改变URL，但是页面不进行刷新。

二、URL的hash和HTML5的history

如何实现改变URL，但是页面不进行刷新？
可以用下面的方法
1、URL的hash
URL的hash也就是锚点（#）,本质上是改变window.location的href属性。
我们可以通过直接赋值location.hash来改变href，但是页面不刷新。
在这里插入图片描述

2、HTML5中的history模式：pushState
类似于栈结构。
在这里插入图片描述
3、HTML5中的history模式：replaceState
直接替换当前的URL，不能前进或后退。

在这里插入图片描述

4、HTML5中的history模式：go

在这里插入图片描述
注意：

history.go(-1)==history.back()
history.go(1)==history.forward()

三、vue-router

目前前端流行的三大框架都有自己的路由实现：
Angular的ngRouter
React的ReactRouter
Vue的vue-router
1、vue-router简介
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合于构建单页面应用。

vue-router是基于路由和组件的
路由用于设定访问路径，将路径和组件映射起来。
在vue-router的单页面应用中，页面的路径的改变就是组件的切换。

2、安装和使用vue-router

npm install vue-router --save

3、在模块化工程中使用它
因为vue-router是一个插件，所以可以通过Vue.use()来安装路由功能。
第一步：导入路由对象，并且调用Vue.use(VueRouter)；
第二步：创建路由实例，并且传入路由映射配置；
第三步：在Vue实例中挂载创建的路由实例。

在src文件夹下新建一个router文件夹，在router文件夹中新建一个index.js文件，用来存放路由相关信息。
具体配置如下
创建router实例，
在这里插入图片描述
在main.js中，将router挂载到Vue实例中，

在这里插入图片描述

3、使用vue-router的步骤

步骤一：创建路由组件
在这里插入图片描述

步骤二：配置路由映射关系：组件和路径映射关系
在这里插入图片描述

步骤三：使用路由：通过<router-link>和<router-view>

在这里插入图片描述

注意：
<router-link>：该标签是一个vue-router中已经内置的组件，它会被渲染成一个<a>标签。
<router-view>：该标签会根据当前的路径，动态渲染出不同的组件。
网页的其他内容，比如顶部的标题/导航，或者底部的一些版权信息等，会和<router-view>处于同一个等级。

在路由切换时，切换的是<router-view>挂载的组件，其他内容不会发生改变。

4、路由的默认路径
在这里插入图片描述

5、HTML5的history模式

如果希望使用HTML5的history模式，非常简单，进行如下配置即可。
在这里插入图片描述
6、router属性的补充

在这里插入图片描述修改linkActiveClass
该class具体的名称也可以通过router实例的属性进行修改。

7、路由代码跳转

8、动态路由

9、vue-router打包文件的解析
执行npm run build命令，即可打包程序。
打包后，出现dist文件夹，其中static文件夹下的有css和js文件夹。默认将我们的js文件打包到下面三个文件里。
在这里插入图片描述

10、认识路由的懒加载

在这里插入图片描述

举个例子来说，就像一个手机APP一样，当需要哪个页面展现在屏幕上时，就请求对应的js代码。懒加载就是用到时才会进行加加载。
在这里插入图片描述
路由懒加载的效果如下

懒加载的方式有以下几种

11、认识嵌套路由

嵌套路由是一个很常见的功能，比如在home页面中，我们希望通过/home/news和/home/message访问一些内容。一个路径映射一个组件，访问这两个路径也会分别渲染两个组件。
路径和组件的关系如下：
在这里插入图片描述
实现嵌套路由有两个步骤：
创建对应的子组件，并在路由映射中配置对应的子路由。
在组件内部使用<router-view>标签