【vue】路由vue-router

最新推荐文章于 2023-09-12 01:04:00 发布

Point酱

最新推荐文章于 2023-09-12 01:04:00 发布

阅读量164

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_40571965/article/details/118739572

版权

41 篇文章 0 订阅

订阅专栏

一、简单理解vue-router和单页面多页面应用区别
二、理解项目中路由相关代码
三、[命名路由]简单实现页面的路由跳转
四、了解 vue-router的两种模式hash模式与history模式

一、简单理解vue-router和单页面多页面应用区别
1、简介

路由即SPA路径管理器 - 用于设定访问路径，并将路径和组件映射起来。
vue单页面是基于路由和组件，路由用于访问路径，并将路径和组件映射起来。
🎁SPA核心之一：更新视图而不重新请求页面。
⚠️vue-router不是vue本身带的，而是额外的，因此需要我们进行引入。

npm install vue-router --save

但是通过vue cli创建的项目中已经为我们加上了vue-router。但如用html文件写，则需要用script标签去引用。

可以点击下面👇博文先创建项目。
【vue】手把手创建vue项目并上传github（mac版）

2、为啥要用路由呢？

之前我们熟悉的页面跳转是用a标签实现的，但是在vue项目中做的都是单页面应用，当项目准备打包📦时，会生成dist文件夹，这里只有一个静态的资源和一个index.html页面，因此所写的标签是不起作用的。我们必须使用vue-router来进行管理。
🎁单页面应用和多页面应用的区别：很多情况下，我们的需求中，页面的头部和底部是一个组件的复用，A切B页面只会渲染加载中间的内容

单页面

多页面

目前基本上都是单页面应用，至于多页面感觉一般是内部会用8…

二、理解项目中路由相关代码

使用vue-cli创建的项目会自动为我们生成基本的路由.

src包目录结构如下：
详见代码注释👀
router- index.js文件。
路由配置
main.js 文件
使用

三、[命名路由]简单实现页面的路由跳转
通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。你可以在创建 Router 实例的时候，在routes 配置中给某个路由设置名称。
在路由配置中增加路由地址，举个🌰
我们的需求是增加一个/home地址
router -index.js
增加一个home组件写好内容
注意APP.vue中使用的是<router-view />组件，在访问地址后加上/home
我们即可完成新的路由✅ 很简单又很方便管理吧～
当然我们完全可以进行简单的路由跳转，如官方文档里面的案例，单文件的路由使用但是在开发过程中，我们更倾向于这样管理路由。所以其他种路由的使用，这里便不再赘述。
官方文档点击👉：Vue Router
表示官方文档我看的云里雾里，目前只能get到这些…

四、了解vue-router的两种模式hash模式与history模式
1、hash – 即地址栏中#符号。

vue-router 默认是hash模式，hash中的#及之后的字符不会发送到服务端进行资源或者数据的请求，它是用来指导浏览器动作的，对服务端没有效果，所以改变hash不会重新加载页面。举个🌰http://www.admin.com/#/index
hash的值为 #/index
特点： hash虽然出现在url中，但不会包括在http请求里仅hash符号之前的内容会被包含在请求里，因此不会重新加载页面
hash不会去修改浏览器的历史记录栈生成二维码，微信分享的时候会自动过滤掉#后面的参数
hash模式背后的原理是onhashchange事件

2、history-- 利用了HTML5中History Interface 中新增的pushState()和replaceState()方法

这两个方法用于浏览器的历史记录栈，在当前已有的back，forword，go的基础之上，提供了对历史记录修改的功能。只是当他们执行修改的时候，虽然改变了当前的url,但浏览器不会立即向服务端发出请求

因此可以说，hash模式和history模式都属于浏览器自身的特性，vue-router只是利用了这两个特性来实现前端的路由

3、使用场景

一般场景下，hash和history都可以，不想URL中含有#的话就可以使用history模式，这种模式充分利用了history.pushState API来完成跳转而无需加载页面。

vue-router 的作用就是通过改变url,再不重新加载页面的情况之下，更新视图，从而动态加载与销毁组件。
简单来说就是，虽然地址栏的地址改变了，但并不是一个全新的页面，只是对之前的页面进行了部分修改，这也是SPA单页面的特点，其所有的活动局限于一个web页面中，非懒加载的页面尽在web页面初始化的时候加载相应的html,javaScript,css文件。
一旦页面加载完成，SPA不会对页面进行重新加载或者跳转，而是利用javaScript动态变换html,默认的hash模式是通过锚点实现路由以及控制组件的显示与隐藏来实现类似于页面跳转的交互。

🎁关于路由还有嵌套、动态路由等，对于路由的内容还有待丰富，本文只是简单介绍，偏实现向。后续项目推进，但愿能继续更新^^